有个bug

有个bug

<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link transition rel="stylesheet" href="css/base.css" />
    <link transition rel="stylesheet" href="css/common.css" />
    <link transition rel="stylesheet" href="css/index.css" />
</head><body>
    <!-- 站点导航开始 -->
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link ">免费注册</a></li>
                <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link ">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition ">我的慕淘<i class="dropdown-arrow icon transform">&#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>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transform">&#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>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link transition">商品分类</a>
                </li>
                <li class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transform">&#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>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
                    </ul>
                </li>
                <li class="menu nav-site-service dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transform">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 站点导航结束 -->
    <!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
    <script>
    //两种判断是否有jquery库的写法：
    // window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script type="text/javascript" src="js/transition.js"></script>
    <script type="text/javascript" src="js/showHiden.js"></script>
    <script type="text/javascript" src="js/dropdown.js"></script>
    <script src="js/index.js"></script>
</body></html>

/*css reset*/
 /*清除内外边距*/
 body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
 ul, ol, li, dl, dt, dd, /*列表元素*/
 form, fieldset, legend, input, button, select, textarea, /*表单元素*/
 th, td, /*表格元素*/
 pre {
  padding: 0;
  margin: 0;
 }

 /*重置默认样式*/
 body, button, input, select, textarea {
  /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
  color: #333;
  font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
 }
 h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
 }
 em, i {
  font-style: normal;
 }

 a {
  text-decoration: none;
 }
 li {
  list-style-type: none;
  vertical-align: top;
 }
 img {
  border: none;
  /*display: block;*/
  vertical-align: top;
 }
 textarea {
  overflow: auto;
  resize: none;
 }
 table {
  border-spacing: 0;
  border-collapse: collapse;
 }

/*常用公共样式*/
 .fl {
  float: left;
  display: inline;
 }
 .fr {
  float: right;
  display: inline;
 }
 .cf:before,
 .cf:after {
  content: " ";
  display: table;
  
 }
 .cf:after {
  clear: both;
 }
 .cf {
  *zoom: 1;
 }

/*公共样式*/
.container {
    /*站点导航*/
    width: 1200px;
    margin: 0 auto;
}

a.link {
    /*链接正常颜色*/
    color: #4d555d;
}

a.link:hover {
    /*链接经过颜色*/
    color: #f01414 !important;
}

@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;
}

.transform {
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

/*下拉菜单共有属性*/
.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;

}

[class*="-active"] .dropdown-arrow {
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*showhide插件*/
.transition {
    transition: all 0.5s !important;
}

.fadOut {
    visibility: visible !important;
    opacity: 0 !important;
}

.slideUpDown {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.slideLeftRight {
    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;
}

/*nav-site*/
.nav-site{ /*站点导航整体设置*/
 width:100%;
 background-color: #f3f5f7;
}
.nav-site .container{  /*站点导航内容块整体设置*/
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
    margin-left:10px;
}
.nav-site-category{
 margin:0 10px;
}

.nav-site-service{
 margin-right:15px;
}
/*menu-dropdown*/
.menu .dropdown-toggle{
 display:block;
 height: 100%;
 padding: 0 13px 0 12px;
 border-left: 1px solid #f3f5f7;
 border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
 line-height: 1;
 margin-left:5px;
}
.menu .dropdown-layer{
    top:43px;
    background-color:#fff;
    z-index: 1;
    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-item{
 background-color: #f3f5f7;
}

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

(function($) {
    "use strict";

    function Dropdown($elem, option) {
        this.$elem = $elem;
        this.option = option;
        this.data = this.option.active + "-active";
        this.$layer = this.$elem.find(".dropdown-layer");
        this._init();

    };
    Dropdown.DEFAULTS = {
        event: "hover",
        css3: false,
        js: false,
        animation: "fade",
        active: "dropdown",
    };
    Dropdown.prototype._init = function() {
     var self = this;
     this.$layer.on("show shown hide hidden", function(e){
         self.$elem.trigger("dropdown-" + e.type);
        });
     this.$layer.showHide(this.option);
        if (this.option.event === "click") {
            this.$elem.on("click", function() {
                self.show();
                return false;
            })
            $(document).on("click", function() {
                self.hide();
                return false;
            })
        } else {
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    };
    Dropdown.prototype.show = function() {
        var self = this;
        if (this.option.delay) {
            this.timer = setTimeout(function() {
                _show()
            }, self.option.delay);
        } else {
            _show();
        }

        function _show() {
            self.$elem.addClass(self.data);
            self.$layer.showHide("show");
        }
    };
    Dropdown.prototype.hide = function() {
        if (this.option.delay) {
            clearTimeout(this.timer);
        }
        this.$elem.removeClass(this.data);
        this.$layer.showHide("hide");

    };
    $.fn.extend({
        dropdown: function(option) {
            return this.each(function() {
                var $this = $(this),
                 options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === "object" && option),
                 dropdown = $this.data("showHide");

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

//下拉菜单调用
$(".dropdown").dropdown({
 css3: true,
 js: false,
 animation: "slideUpDown",
});
$(".dropdown").on("dropdown-show", function() {
        var $this = $(this),
            dataLoad = $this.data("load");
        if (!dataLoad) return;

        if (!$this.data("loaded")){
         var html = "",
         $layer = $this.find(".dropdown-layer");
         $.getJSON(dataLoad, function(data) {
            setTimeout(function() {
                for (var i = 0; i < data.length; i++) {
                    html += "<li><a href='" + data[i].url + "' class='menu-item'>" + data[i].name + "</a></li>"
                };
                $layer.html(html);
                $this.data("loaded", true);
            }, 1000);
        });
        };
       
    });

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

    function init($elem, hiddencallback) {
        if ($elem.is(":hidden")) {
            $elem.data("status", "hide");
            if (typeof(hiddencallback) === "function") hiddencallback();
        } else {
            $elem.data("status", "show");
        };
    }

    function show($elem, callback) {
        if ($elem.data("status") === "show") return;
        if ($elem.data("status") === "shown") return;

        $elem.trigger("show").data("status", "show"); //显示前的操作
        if (typeof(callback) === "function") callback();
    }

    function hide($elem, callback) {
        if ($elem.data("status") === "hide") return;
        if ($elem.data("status") === "hidden") return;

        $elem.trigger("hide").data("status", "hide"); //隐藏前的操作
        if (typeof(callback) === "function") callback();
    }

    var slient = {
        init: init,
        show: function($elem) {
            show($elem, function() {
                $elem.show();
                $elem.trigger("shown").data("status", "shown");
            });
        },
        hide: function($elem) {
            hide($elem, function() {
                $elem.hide();
                $elem.trigger("hidden").data("status", "hidden");
            });
        },
    }

    var css3 = {
        fade: {
            init: function($elem) {
                css3._init($elem, "fadOut");
            },
            show: function($elem) {
                css3._show($elem, "fadOut");
            },
            hide: function($elem) {
                css3._hide($elem, "fadOut");
            },
        },
        slideUpDown: {
            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, "slideUpDown");
            },
            show: function($elem) {
                css3._show($elem, "slideUpDown");
            },
            hide: function($elem) {
                css3._hide($elem, "slideUpDown");
            },
        },
        slideLeftRight: {
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, "slideLeftRight");
            },
            show: function($elem) {
                css3._show($elem, "slideLeftRight");
            },
            hide: function($elem) {
                css3._hide($elem, "slideLeftRight");
            },
        },
        fadeSlideUpDown: {
            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, "fadOut slideUpDown");
            },
            show: function($elem) {
                css3._show($elem, "fadOut slideUpDown");
            },
            hide: function($elem) {
                css3._hide($elem, "fadOut slideUpDown");
            },
        },
        fadeSlideLeftRight: {
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, "fadOut slideLeftRight");
            },
            show: function($elem) {
                css3._show($elem, "fadOut slideLeftRight");
            },
            hide: function($elem) {
                css3._hide($elem, "fadOut slideLeftRight");
            },
        }
    };
    css3._init = function($elem, className) {
        $elem.addClass("transition");
        init($elem, function() {
            $elem.addClass(className);
        });
    };
    css3._show = function($elem, className) {
        show($elem, function() {
            $elem.off(transition.end).one(transition.end, function() {
                $elem.trigger("shown").data("status", "shown");
            }); //显示后的操作
            $elem.show();
            //元素过度
            setTimeout(function() {
                $elem.removeClass(className);
            }, 20);
        });
    };
    css3._hide = function($elem, className) {
        hide($elem, function() {
            //元素过度
            $elem.addClass(className);
            //隐藏后的操作
            $elem.off(transition.end).one(transition.end, function() {
                $elem.hide();
                $elem.trigger("hidden").data("status", "hidden");
            });
        });
    }

    var js = {
        fade: {
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, "fadeIn");
            },
            hide: function($elem) {
                js._hide($elem, "fadeOut");
            },
        },
        slideUpDown: {
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, "slideDown");
            },
            hide: function($elem) {
                js._hide($elem, "slideUp");
            },
        },
        slideLeftRight: {
            init: function($elem) {
                js._customInit($elem, {
                    "width": 0,
                    "padding-left": 0,
                    "padding-right": 0,
                });
            },
            show: function($elem) {
                js._customShow($elem);
            },
            hide: function($elem) {
                js._customHide($elem, {
                    "width": 0,
                    "padding-left": 0,
                    "padding-right": 0,
                });
            },
        },
        fadeSlideUpDown: {
            init: function($elem) {
                js._customInit($elem, {
                    "opacity": 0,
                    "height": 0,
                    "padding-top": 0,
                    "padding-bottom": 0,
                });
            },
            show: function($elem) {
                js._customShow($elem);
            },
            hide: function($elem) {
                js._customHide($elem, {
                    "opacity": 0,
                    "height": 0,
                    "padding-top": 0,
                    "padding-bottom": 0,
                });
            },
        },
        fadeSlideLeftRight: {
            init: function($elem) {
                js._customInit($elem, {
                    "opacity": 0,
                    "width": 0,
                    "padding-left": 0,
                    "padding-right": 0,
                });
            },
            show: function($elem) {
                js._customShow($elem);
            },
            hide: function($elem) {
                js._customHide($elem, {
                    "opacity": 0,
                    "width": 0,
                    "padding-left": 0,
                    "padding-right": 0,
                });
            },
        },

    };
    js._init = function($elem, hideencallback) {
        $elem.removeClass("transition");
        init($elem, hideencallback);
    };
    js._customInit = function($elem, options) {
        var style = {};
        for (var i in options) {
            style[i] = $elem.css(i);
        };
        $elem.data("style", style);
        js._init($elem, function() {
            $elem.css(options);
        });
    };

    js._show = function($elem, mode) {
        show($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data("status", "shown").trigger("shown");
            });
        });
    };
    js._customShow = function($elem) {
        show($elem, function() {
            $elem.show();
            $elem.stop().animate($elem.data("style"), function() {
                $elem.data("status", "shown").trigger("shown");
            });
        });
    };
    js._hide = function($elem, mode) {
        hide($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data("status", "hidden").trigger("hidden");
            });
        });
    };
    js._customHide = function($elem, options) {
        hide($elem, function() {
            $elem.stop().animate(options, function() {
                $elem.hide();
                $elem.data("status", "hidden").trigger("hidden");
            });
        });
    };

    var defaults = {
     css3: false,
     js: false,
     animation: "fade"
    };

    function showHide($elem, options) {
        var mode = null;
        if (options.css3 && transition.isSupport) {
            mode = css3[options.animation] || css3[
                defaults.animation];
        } else if (options.js) {
            mode = js[options.animation] || js[
                defaults.animation];
        } else {
            mode = slient;
        };
       
        mode.init($elem);
        return {
            show: $.proxy(mode.show, this, $elem),
            hide: $.proxy(mode.hide, this, $elem),
        };
    };

    $.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);

(function () {
 var transitionEndEventName = {
  transition: 'transitionend',
  MozTransition: 'transitionend',
  WebkitTransition: 'webkitTransitionEnd',
  OTransition: 'oTransitionEnd otransitionend'
 };
 var transitionEnd = '',
  isSupport = false;

 for (var name in transitionEndEventName) {
  if (document.body.style[name] !== undefined) {
   transitionEnd = transitionEndEventName[name];
   isSupport = true;
   break;
  }
 }

 window.mt = window.mt || {};
 window.mt.transition = {
  end: transitionEnd,
  isSupport: isSupport
 };
})();

[
 {
  "url":"###",
  "name":"免费开店"
 },
 {
  "url":"###",
  "name":"已卖出的宝贝"
 },
 {
  "url":"###",
  "name":"出售中的宝贝"
 },
 {
  "url":"###",
  "name":"卖家服务市场"
 },
 {
  "url":"###",
  "name":"卖家培训中心"
 },
 {
  "url":"###",
  "name":"体验中心"
 }

]

当设置animation为slideUpDown模式时，按需加载的样式就会有问题，麻烦仔细看看dropdown-layer元素，之前发了一遍，那个老师说没问题，我也是服了。json数据等都正常，只有样式问题
平地一声雷d 2020-02-09
源自：实战：下拉菜单组件化   3-6 改写站点导航中的下拉菜单
35
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
weixin_慕数据0318417 2020-04-03 09:19:03

老师你好，按照您的方法试了下发现下拉层的高度多出来一截，

http://img1.sycdn.imooc.com//climg/5e868ef6092b836e13660279.jpg

昨天自己胡乱试了一通，在更新完下拉层高度后再将下拉成高度设置为空，好像实现效果还行，但是不知道其中的原因

http://img1.sycdn.imooc.com//climg/5e868e76090fad8910570546.jpg

0
收起回答
  • 好帮手慕慕子 #1
    同学你好，同学的方法确实可以的，能够自己解决问题，真棒，祝学习愉快~
    2020-04-03 09:41:52
好帮手慕慕子 2020-04-02 21:22:35

同学你好，可以获取每一条li元素的高度，累加所有li的高度，设置为下拉层的高度。

http://img1.sycdn.imooc.com//climg/5e85e9c309708b3520520690.jpg

经过上述修改后，在加载过程中提前移走鼠标，再次移入鼠标，是可以正常显示下拉层。示例：

http://img1.sycdn.imooc.com//climg/5e85e6d20a664cce01410347.jpg

去掉setTimeout后，下拉层也是可以正常显示的。示例：

http://img1.sycdn.imooc.com//climg/5e85e6e60a81a32801600302.jpg

同学可以在源码中测试下效果,祝学习愉快~

0
收起回答
好帮手慕慕子 2020-02-09 14:14:18

同学你好， 因为按需加载是用户的行为，所以我们可以提供一个方法，它的作用是更新当前下拉层的高度，当用户按需加载完成内容后，手动调用这个方法更新下拉层的高度，示例：

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

    http://img1.sycdn.imooc.com//climg/5e3fa2d0094c04fc09720484.jpg

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

    http://img1.sycdn.imooc.com//climg/5e3fa3040943dd8624241226.jpg

  3. 测试结果， 可以正常显示的

    http://img1.sycdn.imooc.com//climg/5e3fa325095ceb9c08220500.jpg

同学可以自己下去测试一下.

如果我的回答帮助到了你， 欢迎采纳,祝学习愉快~~~~

0
收起回答
  • weixin_慕数据0318417 #1
    还有两个问题： 1.若在加载的过程中提前挪走鼠标，再次将鼠标放上去，高度也不对 2.去掉setTimeout之后下拉菜单就不显示了
    2020-04-02 14:49:08
  • 好帮手慕慕子 回复 weixin_慕数据0318417 #2
    同学你好，老师在上面回复你了，可以查看下，祝学习愉快~
    2020-04-02 21:24:16
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

还有一个小bug
6 0 1
为什么访问不了？其他的文件都能访问就这个不行
1 0 13
老师，发现一个bug
41 0 4
有两个问题
0 0 10
老师，我发现我的代码有个bug
2 0 5

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师