体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么下拉框的样式只在第一次下拉时正确？之后再下拉时的样式就不对了？

来源：3-6 改写站点导航中的下拉菜单

Carol246

2019-09-03 23:25:57

（使用wamp、火狐浏览器，且已清除缓存）

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>慕淘网</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="container">
            <!-- 头部-导航栏 -->
            <nav class="header__nav">
                <div class="header__nav__left">
                    <a href="javascript:;" class="header__nav__left-item header__nav__left-item-login">亲，请登录</a>
                    <a href="javascript:;" class="header__nav__left-item link">免费注册</a>
                    <a href="javascript:;" class="header__nav__left-item link">手机逛慕淘</a>
                </div>
                <div class="header__nav__right">
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link transition">我的慕淘<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer-item">已买到的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">我的足迹</a>
                        </div>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link transition">收藏夹<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer-item">收藏的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">收藏的店铺</a>
                        </div>
                    </div>
                    <div class="header__nav__right-item">
                        <a href="javascript:;" class="header__nav__right-item__text header__nav__right-item-link link">商品分类</a>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav" data-load="js/dropdown.json">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link transition">卖家中心<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_left">
                            <a href="javascript:;" class="dropdown__layer__loading"></a>
                            <!-- <a href="javascript:;" class="dropdown__layer-item">免费开店</a>
                            <a href="javascript:;" class="dropdown__layer-item">已卖出的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">出售中的宝贝</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家服务市场</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家培训中心</a>
                            <a href="javascript:;" class="dropdown__layer-item">体验中心</a> -->
                        </div>
                    </div>
                    <div class="header__nav__right-item nav dropdown" data-active="nav">
                        <a href="javascript:;" class="header__nav__right-item__text dropdown__toggle link transition">联系客服<i class="dropdown__toggle__arrow icon transition">&#xe609;</i></a>
                        <div class="dropdown__layer dropdown__layer_position_right">
                            <a href="javascript:;" class="dropdown__layer-item">消费者客服</a>
                            <a href="javascript:;" class="dropdown__layer-item">卖家客服</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <button id="btn-show">点我打开</button>
    <button id="btn-hide">点我关闭</button>


    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/transition.js"></script>
    <script src="js/showHide.js"></script>
    <script src="js/dropdown.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

base.css

*{
    margin: 0;
    padding: 0;
}
body{
    overflow-y: scroll;
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}

common.css

/* 容器 */
    .container{
        width: 1200px;
        margin: 0 auto;
    }

/* 链接 */
    .link{
        color: #4d555d;
    }
    .link:hover{
        color: #f00;
    }

/* showHide */
    .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 */
    .dropdown{
        position: relative;
    }
    .dropdown__toggle{
        position: relative;
        z-index: 2;
    }
    .dropdown__layer{
        display: none;
        position: absolute;
        z-index: 1;
    }
    .dropdown__layer_position_left{
        left: 0;
    }
    .dropdown__layer_position_right{
        right: 0;
    }
    .dropdown__layer__loading{
        display: block;
        width: 32px;
        height: 32px;
        padding: 30px;
        background: url('../img/loading.gif') center no-repeat;
    }

/* nav dropdown */
    .nav .dropdown__toggle__arrow{
        vertical-align: middle;
        display: inline-block;
        line-height: 1;
        margin-left: 5px;
    }
    .nav .dropdown__layer{
        border: 1px solid #cdd0d4;
        background-color: #fff;
        top: 43px;
    }
    .nav .dropdown__layer-item{
        display: block;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        color: #4d555d;
        white-space: nowrap;
    }
    .nav .dropdown__layer-item:hover{
        background-color: #f3f5f7;
    }
    .nav-dropdown_status_active .dropdown__toggle{
        background-color: #fff;
        color: #f00;
        border-left: 1px solid #cdd0d4;
        border-right: 1px solid #cdd0d4;
    }
    .nav-dropdown_status_active .dropdown__layer{
        /*display: block;*/
    }

/*icon*/
    @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;
    }
    [class*="-dropdown_status_active"] .dropdown__toggle__arrow {
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .transition {
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

index.css

/* 头部 */
.header{
    width: 100%;
    background-color: #f3f5f7;
    font-size: 12px;
}
/* 头部-导航栏 */
.header__nav{
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
    padding: 0 15px;
}
.header__nav__left{
    float: left;
}
.header__nav__left-item{
    margin-right: 5px;
}
.header__nav__left-item-login{
    color: red;
}
.header__nav__right{
    float: right;
}
.header__nav__right-item{
    float: left;
}
.header__nav__right-item__text{
    display: block;
    height: 44px;
    padding: 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}

transition.js

(function(){
    var transitionEndEventName = {
        transition: 'transitionend',
        WebkitTransition: 'webkitTransitionEnd',
        MozTransition: 'mozTransitionEnd',
        OTransition: 'oTransitionEnd'
    };
    var transitionEnd = '',
        isSupport = false;
    for(var name in transitionEndEventName){
        if(typeof(document.body.style[name]) !== 'undefined'){
            transitionEnd = transitionEndEventName[name];
            isSupport = true;
            break;
        }
    }
    window.mt = window.mt || {};
    window.mt.transition = {
        end: transitionEnd,
        isSupport: isSupport
    };
})();

showHide.js

(function($){
    var transition = window.mt.transition;

    function init($ele, callback){
        if($ele.is(':hidden')){
            $ele.data('status','hidden');
            if(typeof(callback) === 'function') callback();
        }else{
            $ele.data('status','shown');
        }
    }
    function show($ele, callback){
        if($ele.data('status') === 'show') return;
        if($ele.data('status') === 'shown') return;
        $ele.data('status','show').trigger('show');
        callback();
    }
    function hide($ele, callback){
        if($ele.data('status') === 'hide') return;
        if($ele.data('status') === 'hidden') return;
        $ele.data('status','hide').trigger('hide');
        callback();
    }

    var silent = {
        init: init,
        show: function($ele){
            show($ele, function(){
                $ele.show();
                $ele.data('status','shown').trigger('shown');
            })
        },
        hide: function($ele){
            hide($ele, function(){
                $ele.hide();
                $ele.data('status','hidden').trigger('hidden');
            })
        }
    };
    var css3 = {
        fade: {
            init: function($ele){
                css3._init($ele, 'fadeOut');
            },
            show: function($ele){
                css3._show($ele, 'fadeOut');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function($ele){
                $ele.height($ele.height());
                css3._init($ele, 'slideUpDownCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'slideUpDownCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'slideUpDownCollapse');
            }
        },
        slideLeftRight: {
            init: function($ele){
                $ele.width($ele.width());
                css3._init($ele, 'slideLeftRightCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'slideLeftRightCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'slideLeftRightCollapse');
            }
        },
        fadeSlideUpDown: {
            init: function($ele){
                $ele.height($ele.height());
                css3._init($ele, 'fadeOut slideUpDownCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'fadeOut slideUpDownCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut slideUpDownCollapse');
            }
        },
        fadeSlideLeftRight: {
            init: function($ele){
                $ele.width($ele.width());
                css3._init($ele, 'fadeOut slideLeftRightCollapse');
                
            },
            show: function($ele){
                css3._show($ele, 'fadeOut slideLeftRightCollapse');
            },
            hide: function($ele){
                css3._hide($ele, 'fadeOut slideLeftRightCollapse');
            }
        }
    };
    css3._init = function($ele, className){
        $ele.addClass('transition');
        init($ele, function(){
            $ele.addClass(className);
        });
    };
    css3._show = function($ele, className){
        show($ele, function(){
            $ele.show();
            $ele.off(transition.end).one(transition.end, function(){
                $ele.data('status','shown').trigger('shown');
            });
            setTimeout(function(){
                $ele.removeClass(className);
            },0)
        })
    };
    css3._hide = function($ele, className){
        hide($ele, function(){
            $ele.off(transition.end).one(transition.end, function(){
                $ele.hide();
                $ele.data('status','hidden').trigger('hidden');
            });
            $ele.addClass(className);
        })
    };
    var js = {
        fade: {
            init: function($ele){
                js._init($ele);
            },
            show: function($ele){
                js._show($ele, 'fadeIn');
            },
            hide: function($ele){
                js._hide($ele, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function($ele){
                js._init($ele);
            },
            show: function($ele){
                js._show($ele, 'slideDown');
            },
            hide: function($ele){
                js._hide($ele, 'slideUp');
            }
        },
        slideLeftRight: {
            init: function($ele){
                js._customInit($ele, ['width', 'padding-left', 'padding-right']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        },
        fadeSlideUpDown: {
            init: function($ele){
                js._customInit($ele, ['opacity', 'height', 'padding-top', 'padding-bottom']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        },
        fadeSlideLeftRight: {
            init: function($ele){
                js._customInit($ele, ['opacity', 'width', 'padding-left', 'padding-right']);
            },
            show: function($ele){
                js._customShow($ele);
            },
            hide: function($ele){
                js._customHide($ele);
            }
        }
    };
    js._init = function($ele, callback){
        $ele.removeClass('transition');
        init($ele, callback);
    };
    js._customInit = function($ele, optionsArr){
        var styles = {},
            cssArg = {};
        for(var k in optionsArr){
            styles[optionsArr[k]] = $ele.css(optionsArr[k]);
            cssArg[optionsArr[k]] = 0;
        }
        $ele.data('styles', styles);
        js._init($ele, function(){
            $ele.css(cssArg);
        });
    };
    js._show = function($ele, mode){
        show($ele, function(){
            $ele.stop()[mode](function(){
                $ele.data('status', 'shown').trigger('shown');
            });
        })
    };
    js._customShow = function($ele){
        show($ele, function(){
            $ele.show();
            $ele.stop().animate($ele.data('styles'), function(){
                $ele.data('status', 'shown').trigger('shown');
            });
        });
    };
    js._hide = function($ele, mode){
        hide($ele, function(){
            $ele.stop()[mode](function(){
                $ele.data('status', 'hidden').trigger('hidden');
            });
        })
    };
    js._customHide = function($ele){
        hide($ele, function(){
            var animateArg = {};
            for(var k in $ele.data('styles')){
                animateArg[k] = 0;
            }
            $ele.stop().animate(animateArg, function(){
                $ele.hide();
                $ele.data('status', 'hidden').trigger('hidden');
            });
        });
    };

    var defaults = {
        css3: false,
        js: false,
        animation: 'fade'
    };
    function showHide($ele, options){
        var mode = null;
        if(options.css3 && transition.isSupport){   // css3 transition
            mode = css3[options.animation] || css3[defaults.animation];
        }else if(options.js){   // js animation
            mode = js[options.animation] || js[defaults.animation];
        }else{   // no animation
            mode = silent;
        }
        mode.init($ele);
        return {
            show: $.proxy(mode.show, this, $ele),
            hide: $.proxy(mode.hide, this, $ele)
        };
    }
    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;

    $.fn.extend({
        showHide: function(option){
            return this.each(function(){
                var $this = $(this),
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    mode = $this.data('showHide');
                if(!mode){
                    $this.data('showHide', mode = showHide($this, options));
                }
                if(typeof mode[option] === 'function'){
                    mode[option]();
                }
            });
        }
    });

})(jQuery);

dropdown.js

(function($){
    // 写法二：构造函数
    function Dropdown($ele, options){
        this.$ele = $ele;
        this.options = options;
        this.$layer = this.$ele.find('.dropdown__layer');
        this.activeClass = options.active + '-dropdown_status_active';

        this._init();        
    }
    Dropdown.prototype._init = function(){
        var self = this;

        this.$layer.showHide(this.options);

        this.$layer.on('show shown hide hidden', function(e){
            // self.$ele.trigger('dropdown-' + e.type);
            // 更新 dropdown__layer 的样式  ？？？
            self.$ele.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.$ele.click(function(e){
                self.show();
                e.stopPropagation();
            });
            $(document).click($.proxy(this.hide, this));
        }else{
            this.$ele.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    };
    Dropdown.prototype.show = function(){
        var self = this;
        function _show(){
            self.$ele.addClass(self.activeClass);
            self.$layer.showHide('show');
        }

        if(this.options.delay){
            this.timer = setTimeout(function(){
                _show();
            }, this.options.delay);
        }else{
            _show();
        }
        
    };
    Dropdown.prototype.hide = function(){
        clearTimeout(this.timer);
        this.$ele.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    };
    $.fn.extend({
        dropdown: function(option){
            this.each(function(){
                var $this = $(this);
                var dropdown = $this.data('dropdown');
                var options = $.extend({}, $(this).data(), typeof(option) === 'object' && option);
                if(!dropdown){
                    $this.data('dropdown', dropdown = new Dropdown($this, options));
                }
                if(typeof dropdown[option] === 'function'){
                    dropdown[option]();
                }    
            });
        }
    });
})(jQuery);

dropdown.json

[
    {
        "href": "javascript:;",
        "text": "免费开店"
    },
    {
        "href": "javascript:;",
        "text": "已卖出的宝贝"
    },
    {
        "href": "javascript:;",
        "text": "出售中的宝贝"
    },
    {
        "href": "javascript:;",
        "text": "卖家服务市场"
    },
    {
        "href": "javascript:;",
        "text": "卖家培训中心"
    },
    {
        "href": "javascript:;",
        "text": "体验中心"
    }
]

index.js

// 调用封装好的 dropdown 方法
$('.dropdown').dropdown({
    event: 'hover',   // hover或click
    delay: 200,
    css: true,
    js: true,
    animation: 'fadeSlideUpDown',
    active: 'nav'
});

// 通过暴露方法，自定义show、hide
$('#btn-show').click(function(){
    $('.dropdown').dropdown('show');
});
$('#btn-hide').click(function(){
    $('.dropdown').dropdown('hide');
});

// 按需加载
$('.dropdown').on('dropdown-show', function(e, updateLayer){
    var $this = $(this);
    var dataLoad = $this.data('load');
    // console.log($this.data());

    if(!dataLoad) return;

    if(!$this.data('loaded')){
        var $layer = $this.find('.dropdown__layer');
        var html = '';
        $.getJSON(dataLoad, function(data){
            // 模拟延迟
            setTimeout(function(){
                for(var i = 0; i < data.length; i++){
                    html += '<a href="' + data[i].href + '" class="dropdown__layer-item">' + data[i].text + '</a>';
                }
                $layer.html(html);
                $this.data('loaded', true);

                // 更新 dropdown__layer 的样式
                updateLayer();
            }, 1000)
        });
    }
});


写回答

4回答

好帮手慕夭夭

2019-09-07

你好同学，默认的高度就是元素的初始化高度，是你在css样式中给最初给它设置的。高度为180px是后来菜单内容加载的时候使用js给它动态设置的，不叫默认高度哦。因为鼠标移出的时候，下拉菜单隐藏，所以又把180px高度变为0px达到隐藏的效果，这个180px就没有了哦。

祝学习愉快，望采纳。

0
harol246
h 也就是说，即使我最开始没有给layer设置高度（默认为height: auto），它的高度是由最初的内容撑起来的，它的默认高度也不会是height:auto，而是它的内容的高度？
h019-09-07
共1条回复

好帮手慕夭夭

2019-09-06

你好同学，这个和下拉菜单加载有关系。同学可以在浏览器中按F12查看一下，下拉菜单默认是没有内容的，当鼠标移入的时候，下拉菜单获取的高度值为92px：

http://img.mukewang.com/climg/5d7245160001beb705190134.jpg

这个92px是元素.dropdown__layer__loading的实际高度，也就是下拉菜单默认的。

http://img.mukewang.com/climg/5d7247340001831510360283.jpg

当它加载内容后，就重新设置了新的高度180px

http://img.mukewang.com/climg/5d724597000191a105510129.jpg

鼠标离开菜单的时候，只是隐藏了。所以第二次就不需要重新加载,也就不会触发设置下拉菜单的高度。那么它显示的就是它默认的高度92px了。

可以在css重新设置一下高度，如下：

http://img.mukewang.com/climg/5d7248e70001170b04520149.jpg

祝学习愉快，望采纳。

0
harol246
h 哇！真的可以了诶！但是它的高度在重新设置为180px以后，为什么默认高度没有变成180px呢？
h019-09-06
共1条回复

Carol246

提问者

2019-09-04

不是的，是第三个下拉框，设置了按需加载的那个。

第一次：

http://img.mukewang.com/climg/5d6fa1bb0001a8b501370241.jpg

第二次、第三次等等……：

http://img.mukewang.com/climg/5d6fa1f60001327201130234.jpg

0

好帮手慕夭夭

2019-09-04

你好同学，老师这边使用谷歌和火狐都测试了一下，移入多次，下拉框样式都是一样的，正常哦。如下：

移入第一次

http://img.mukewang.com/climg/5d6f27940001c0ce01330129.jpg

移入第二次

http://img.mukewang.com/climg/5d6f27a9000193da01400133.jpg

请同学再测试一下，如果还有问题，你可以先做其他的地方。等作业做完之后在作业区域提交。这样批复老师可以拿到你完整的作业，帮助你更准确高效的指导问题哦。

祝学习愉快，望采纳。

0

0 学习 · 14456 问题

查看课程

相似问题

下拉菜单的高度与loading图片的高度一致，却没法与加载的内容高度一致

回答 2

为什么 $.getJSON 没有作用？已使用wamp

回答 5

回答 2

本地文件这里改写了一下，显示不出来

回答 4

老师，为什么我的下拉菜单不显示呢？

回答 2

打开慕课网App查看更多内容