我从json获取的数据后显示出现了问题，显示不完全，高度不够

显示结果就是这个样子不知道是怎么回事。

Edward666 2019-10-18

源自：实战：下拉菜单组件化 3-5 下拉菜单的按需加载

收起

6回答

好帮手慕星星 2019-10-24 15:07:43

同学你好，老师用你修改的代码测试没有问题，slideLeftRight动画也可以实现：

移出的时候超出的文字还会看到，可以在css样式中设置超出隐藏（index.css）：

建议清除浏览器缓存重新测试下哦，祝学习愉快！

收起回答

提问者 Edward666 2019-10-24 11:38:27

index.js
(function($){
	$('.dropdown').on('dropdown-show', function(e, updataLayer){

        var $this = $(this),
            dataLoad = $this.data('load');
        
        if (!dataLoad) return;

        if (!$this.data('loaded')) {
            var $layer = $this.find('.dropdown-layer'),
                html = '';
            //下面的json文件加载不够灵活，只能加载dropdown.json文件，
            //为了可以加载不同的文件将加载文件名保存在元素的data数据中，通过修改内容加载不同的文件
            $.getJSON(dataLoad, function(data){  //每次下拉菜单显示之前都会获取json文件
            
                // html = '<li class="dropdown-loading"></li>';//在js当中操作dom，会非常影响性能
                for(var i = 0; i<data.length; i++){
                    html += '<li><a href="'+ data[i].url +'" target="_blank" class="menu-item">'+ data[i].name +'</a></li>';
                }

                $layer.html(html);
                $this.data('loaded', true);
                updataLayer();
            });
        }
    });
    
	$('.dropdown').dropdown({
		css3: true,
	    js: false,
        animation: 'slideLeftRight'
	});

})(jQuery);

dropdown.js
(function($){
    'use strict';

    function Dropdown($elem, options){
        //this指的是使用Dropdown构造函数创建的对象。
        this.$elem = $elem;
        this.$layer = this.$elem.find('.dropdown-layer');
        this.activeClass = this.$elem.data('active') + '-active';
        this.options = options;

        this._init();
    }

    Dropdown.prototype._init = function(){
        var self = this;
        this.$layer.showHide(this.options);
        this.$layer.on('show shown hide hidden', function(e){
            self.$elem.trigger('dropdown-' + e.type, function(){
                self.$layer.height('auto')
                .height(self.$layer.height())
                .width('auto')
                .width(self.$layer.width())
            });
        });
        if(this.options.event === 'click'){
            this.$elem.on('click', function(e){
                // $.proxy(this.show, this);
                self.show();
                e.stopPropagation();  //阻止冒泡
            });
            $(document).on('click', function() { self.hide() });
        }else{
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    }

    Dropdown.prototype.show = function(){
        var self = this;
        if (this.options.delay) {
            this.timer = setTimeout(function(){//在setTimeout方法下函数的this指的是
                self.$elem.addClass(self.activeClass);
                self.$layer.showHide('show');
            }, this.options.delay);
        }else{
            this.$elem.addClass(this.activeClass);
            this.$layer.showHide('show');
        }
        
    }
    Dropdown.prototype.hide = function(){
        if (this.options.dalay) {
            clearTimeout(this.timer);
        }
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    }
    var defaults = {    //添加默认动画对象
        css3: false,
        js: false,
        delay: 0,
        event: 'hover',
        animation: 'fade'
    }
    //使用jQuery的插件方式添加jQuery方法，并使用
    $.fn.extend({
        dropdown: function(option){
            return this.each(function(){
                var $this = $(this),
                    dropdown = $this.data('dropdown'),
                    options = $.extend({}, defaults, typeof option === 'object' && option);//动画对象的覆盖

                

                if (!dropdown) {
                    $this.data('dropdown', dropdown = new Dropdown($this, options));
                }
                if (typeof dropdown[option] === 'function') {
                    dropdown[option]();
                }
            })
        }
    })
 
})(jQuery);

效果变成这样了

收起回答

提问者 Edward666 #1

这个时候我用的slideLeftRight动画

2019-10-24 11:40:16

好帮手慕星星 2019-10-20 15:27:01

同学你好，

1、是换了css3动画效果的原因：

在这个动画中获取了元素的高度：

也就是获取了加载图标显示时候的高度，所以最终显示的也是这个高度，如果内容高度超出的话，就会有问题。

2、视频中老师只是提供了一个方式，代码还需要根据动画进行调整，老师这里以源码测试为例：

因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的宽和高，当用户按需加载完成内容后，手动调用这个方法更新下拉层的宽和高。

（1）在dropdown.js中init方法中添加一个函数用来更新下拉层的宽高，第一遍将下拉层高度设置为auto，让其由填充的内容撑开，然后在获取到填充内容后的高度，赋值给下拉层，让其在页面中显示正常。

（2）调用这个函数，在请求到json数据后，将拼接的html结构添加到页面后调用这个函数更新下拉层的宽高。

（3）测试效果：

自己完善测试下，祝学习愉快！

欢迎采纳~

收起回答

提问者 Edward666 #1

谢谢老师，我知道了

2019-10-20 15:36:49
提问者 Edward666 #2

老师，我按照你的代码修改了，但是没有成功是怎么回事？我把修改了的代码粘贴出来。

2019-10-24 11:35:57

提问者 Edward666 2019-10-19 22:18:30

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>下拉菜单组件</title>
    <link rel="stylesheet" href="../css/base.css" />
    <style type="text/css">
    .dropdown {
        position: relative;
    }

    .dropdown-toggle {
        position: relative;
        z-index: 2;
    }

    .dropdown-arrow {
        display: inline-block;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    .dropdown-layer {
        display: none;
        position: absolute;
        z-index: 1;
        overflow: hidden;
    }

    .dropdown-left {
        left: 0;
        right: auto;
    }

    .dropdown-right {
        right: 0;
        left: auto;
    }
    /*.menu .dropdown*/

    .menu .dropdown-toggle {
        display: block;
        height: 100%;
        padding: 0 16px 0 12px;
        border-left: 1px solid #f3f5f7;
        border-right: 1px solid #f3f5f7;
    }

    .menu .dropdown-arrow {
        /*width: 8px;
        height: 6px;*/
        /*background-image: url(../img/dropdown-arrow.png);*/
        margin-left: 8px;
    }

    .menu .dropdown-layer {
        top: 100%;
        background-color: #fff;
        border: 1px solid #cdd0d4;
    }

    .menu-item {
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 12px;
        color: #4d555d;
        white-space: nowrap;
    }

    .menu-item:hover {
        background-color: #f3f5f7;
    }

    .menu-active .dropdown-toggle {
        background-color: #fff;
        border-color: #cdd0d4;
    }

   /* .menu-active .dropdown-arrow {
        background-image: url(../img/dropdown-arrow-active.png);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    */
    [class *= '-active'] .dropdown-arrow{
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .transition{
        -webkit-transition: all 0.5s;
           -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
             -o-transition: all 0.5s;
                transition: all 0.5s;
    }

    

    @font-face {
        font-family: "iconfont";
        src: url('font/iconfont.eot?t=1477124206'); /* IE9*/
        src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
        url('font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('font/iconfont.svg?t=1477124206#iconfont') format('svg'); /* iOS 4.1- */
    }
    .icon {
        font-family:"iconfont" !important;
        font-size:14px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    } 
    .menu-active .icon-triangle-down{
        border-top: none;
        border-bottom:4px solid #f11c1c;
    }

    /*动画样式类*/
    .fadeOut{
            visibility: hidden !important;
            opacity: 0 !important;
    }
        
    .slideUpDownCollapse{
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .slideLeftRightCollapse{
        width:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    } 
    .dropdown-loading{
        width: 32px;
        height: 32px;
        background: url(../img/loading.gif) no-repeat;
        margin: 20px;
    }
    </style>
</head>

<body>
    <!--   通用html代码
    <div class="menu dropdown">
        <div class="dropdown-toggle">我的慕淘<i class="dropdown-arrow"></i></a>
        <div class="dropdown-layer dropdown-left">
            
        </div>
    </div> -->
    <div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
        <a class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">

            <li class="dropdown-loading"></li>
            <!-- 
            <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
            <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
             -->
        </ul>
    </div>
    <div class="menu dropdown fl" data-active="menu">
        <a class="dropdown-toggle">我的慕淘2<i class="dropdown-arrow icon transition">&#xe609;</i></a>
        <ul class="dropdown-layer dropdown-left">
            
            <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
            <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
            
        </ul>
    </div>
    
    <button id="btn-show">点我显示</button>
    <button id="btn-hide">点我隐藏</button>

    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showHide.js"></script>
    <script src="../js/dropdown.js"></script>
    
    <script type="text/javascript">

    $('.dropdown').on('dropdown-show', function(e){
        var $this = $(this),
            dataLoad = $this.data('load');

        if (!dataLoad) return;
           
        if (!$this.data('loaded')) {  //检验是否获取json数据
            var $layer = $this.find('.dropdown-layer'),
                html = '';
            $.getJSON(dataLoad, function(data){
                console.log(1);
                setTimeout(function(){
                    for(var i = 0; i<data.length; i++){
                        html += '<li><a href="'+ data[i].url +'" target="_blank" class="menu-item">'+ data[i].name +'</a></li>';
                    }

                    $layer.html(html);
                    $this.data('loaded', true);//给获取了json数据的元素一个状态。
                },1000)
            });
        }

    });

    $('.dropdown').dropdown({
        css3: true,
        js: true,
        delay: 200,
        event: 'hover',
        animation: 'slideUpDown'
    });

    $('#btn-show').on('click', function(){
        $('.dropdown').dropdown('show');
    });
    $('#btn-hide').on('click', function(){
        $('.dropdown').dropdown('hide');
    });

    </script>
</body>

</html>

收起回答