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

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

程序没有报错，就是鼠标移到文字上不显示下拉菜单，如下图所示。

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

前面的章节跟着视频，都没有问题，问题出在3-1这里。


我的程序目录如下：

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


index.html如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
   <head>
      <title>3-1-dropDown</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <link type="text/css" rel="stylesheet" href="css/reset.css">
      <link type="text/css" rel="stylesheet" href="css/public.css">
      <link type="text/css" rel="stylesheet" href="css/index.css">
   </head>
   <body>
      <!-- 顶部 -->
      <div class="topPart">
         <div class="top__wrap wrap">
            <!-- 顶部左边部分 -->
            <ol class="top__wrap__left">
               <!-- 请登录 -->
               <li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__login">亲，请登录</a></li>
                    <!-- 免费注册 -->
               <li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__signUp link">免费注册</a></li>
                    <!-- 手机慕淘 -->
               <li class="top__wrap__left__li"><a href="javascript:;" class="top__wrap__left__li__app link">手机慕淘</a></li>
            </ol>
                <!-- 顶部右边部分 -->
            <ol class="top__wrap__right">
               <!-- “我的慕淘” -->
               <li class="top__wrap__right__li top dropDown" data-on="top">
                  <a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">我的慕淘<i class="dropDown-arrow"></i></a>
                        <!-- “我的慕淘”下拉列表 -->
                  <ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
                     <li class="top-item"><a href="javascript:;">已买到的宝贝</a></li>
                     <li class="top-item"><a href="javascript:;">我的足迹</a></li>
                  </ol>
               </li>
                    <!-- “收藏夹” -->
               <li class="top__wrap__right__li top dropDown" data-on="top">
                  <a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">收藏夹<i class="dropDown-arrow"></i></a>
                        <!-- “收藏夹”下拉列表 -->
                  <ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
                     <li class="top-item"><a href="javascript:;">收藏的宝贝</a></li>
                     <li class="top-item"><a href="javascript:;">收藏的店铺</a></li>
                  </ol>
               </li>
                    <!-- “商品分类” -->
               <li class="top__wrap__right__li"><a href="javascript:;" class="top__wrap__right__li__category link">商品分类</a></li>
                    <!-- “卖家中心” -->
               <li class="top__wrap__right__li top dropDown" data-on="top">
                  <a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">卖家中心<i class="dropDown-arrow"></i></a>
                        <!-- “卖家中心”下拉列表 -->
                  <ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
                     <li class="top-item"><a href="javascript:;">免费开店</a></li>
                     <li class="top-item"><a href="javascript:;">已卖出的宝贝</a></li>
                     <li class="top-item"><a href="javascript:;">出售中的宝贝</a></li>
                     <li class="top-item"><a href="javascript:;">卖家服务市场</a></li>
                     <li class="top-item"><a href="javascript:;">卖家培训中心</a></li>
                     <li class="top-item"><a href="javascript:;">体验中心</a></li>
                  </ol>
               </li>
                    <!-- “联系客服” -->
               <li class="top__wrap__right__li top dropDown" data-on="top">
                  <a href="javascript:;" class="top__wrap__right__li__dropDown-toggle dropDown-toggle link">联系客服<i class="dropDown-arrow"></i></a>
                        <!-- “联系客服”下拉列表 -->
                  <ol class="top__wrap__right__li__dropDown-layer dropDown-layer dropDown-left">
                     <li class="top-item"><a href="javascript:;">买家客服</a></li>
                     <li class="top-item"><a href="javascript:;">卖家客服</a></li>
                  </ol>
               </li>
            </ol>
         </div>
      </div>
      <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
      <script type="text/javascript">
         window.jQuery || document.write('<script src="js/jquery-1.12.4.min.js"><\/script>');
      </script>
      <script type="text/javascript" src="js/index.js"></script>
      <script type="text/javascript" src="js/transition.js"></script>
      <script type="text/javascript" src="js/showHide.js"></script>
      <script type="text/javascript" src="js/dropDown.js"></script>
   </body>
</html>


index.css如下：

/****************  顶部top基本样式  开始  ****************/

/*顶部*/
.topPart
{
    width: 100%;
    font-size: 12px;
    background-color: #F3F5F7;
}

/*顶部*/
.top__wrap
{
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #CDD0D4;
}

/*顶部左边部分*/
.top__wrap__left,
.top__wrap__left__li
{
    float: left;
}

/*请登录*/
.top__wrap__left__li__login
{
    margin-left: 15px;
    color: #F01414;
}

/*免费注册、手机慕淘*/
.top__wrap__left__li__signUp,
.top__wrap__left__li__app
{
    margin-left: 15px;
}

/*顶部右边部分*/
.top__wrap__right
{
    float: right;
}

/*顶部右边部分*/
.top__wrap__right__li
{
    float: left;
}

/*商品分类*/
.top__wrap__right__li__category
{
    margin: 0 10px;
}

/*联系客服*/
.top__wrap__right__li:last-child > a
{
    margin-right: 15px;
}

/****************  顶部top基本样式  结束  ****************/

/****************  顶部top的下拉菜单样式  开始  ****************/

/*我的慕淘*/
.top .dropDown-toggle
{
    display: inline-block;
    padding: 0 24px 0 12px;
    height: 100%;
    border-left: 1px solid #F3F5F7;
    border-right: 1px solid #F3F5F7;
}

/*下拉箭头*/
.top .dropDown-arrow
{
    top: 20px;
    right: 8px;
    border-width: 5px;
    border-style: solid;
    border-color: #4D555D transparent transparent transparent;
    width: 0;
    height: 0;
    -o-transition: all .2s;
    -ms-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
}

/*下拉层*/
.top .dropDown-layer
{
    top: 44px;
    border: 1px solid #CDD0D4;
    border-top-style: none;
    background-color: #FFF;
}

/*下拉列表项*/
.top .top-item
{
    display: block;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    color: #4D555D;
}

/*下拉列表项*/
.top .top-item > a
{
    color: #4D555D;
}

.top .top-item:hover
{
    background-color: #F3F5F7;
}

/*我的慕淘*/
.top-on .dropDown-toggle
{
    border-color: #CDD0D4;
    background-color: #FFF;
}

/*下拉箭头*/
.top-on .dropDown-arrow
{
    border-top-color: #F01414;
    top: 14px;
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/****************  顶部top的下拉菜单样式  结束  ****************/


public.css如下：

/*
    公共样式
*/

/*定宽样式*/
.wrap
{
    margin: 0 auto;
    width: 1200px;
    min-width: 1200px;
}

/*超链接样式*/
.link
{
    color: #4D555D;
}

/*超链接样式*/
.link:hover
{
    color: #F01414;
}

/****************  下拉菜单dropDown基础样式  开始  ****************/

/*下拉菜单*/
.dropDown
{
    position: relative;
}

/*切换文字*/
.dropDown-toggle
{
    position: relative;
    z-index: 1;
}

/*下拉箭头*/
.dropDown-arrow
{
    position: absolute;
}

/*下拉层，默认隐藏*/
.dropDown-layer
{
    display: none;
    position: absolute;
    z-index: 1;
}

/*下拉层左对齐*/
.dropDown-left
{
    left: 0;
    right: auto;
}

/*下拉层右对齐*/
.dropDown-right
{
    right: 0;
    left: auto;
}

/****************  下拉菜单dropDown基础样式  结束  ****************/


/* 动画时间 */
.transition
{
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/*淡出效果*/
.fadeOut
{
    opacity: 0 !important;
    visibility: hidden !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;
}


reset.css如下：

/*
    重置样式
*/

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, address, big, cite, code,
em, img, ins, samp,
b, u, i, small, strike, strong, sub, sup, tt,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, thead, tbody, tfoot, tr, th, td,
article, aside, details,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: "微软雅黑 Microsoft YaHei";
    font-size: 16px;
    color: #000;
    background-color: #FFF;
}

li
{
    list-style-type: none;
}

a
{
    text-decoration-line: none;
}


dropDown.js如下：

"use strict";

// 下拉菜单模块
(function($)
{
    // 定义局部函数dropDown
    let dropDown = function(ele)
    {
        let $ele = $(ele), // 转换为Jquery对象
            $layer = $ele.find("dropdown-layer"),
            onClass = $ele.attr("data-on") + "-on"; // 获取on状态的class

        $layer.showHide({
            css: true,
            js: true,
            animation: "fade",
        });

        $ele.hover(
            function()
            {
                $(this).addClass(onClass); // 鼠标移入时添加class
                $layer.showHide("show");
            },
            function()
            {
                $(this).removeClass(onClass); // 鼠标移出时删除class
                $layer.showHide("hide");
            });
    };


    $.fn.dropDown = function()
    {
        // 执行局部函数dropDown
        return $(this).each(function()
        {
            dropDown($(this));
        });
    };


})(jQuery);


index.js如下：

$().ready(function()
{
    // 下拉菜单模块
    $(".dropDown").dropDown();
});


showHide.js如下：

(function($)
{
    "use strict";

    /****************************    module 1: start    ****************************/
    let silentAnimation =
        {
            // 初始化
            init: function($ele)
            {
                init($ele);

                console.log("silentAnimation init");
            },

            // 显示
            show: function($ele)
            {
                show($ele, function()
                {
                    // 调用jQuery的show方法
                    $ele.show();

                    // 触发自定义的shown事件，设置状态为shown
                    $ele.trigger("shown").data("status", "shown");
                });

                console.log("silentAnimation show");
            },

            // 隐藏
            hide: function($ele)
            {
                hide($ele, function()
                {
                    // 调用jQuery的hide方法
                    $ele.hide();

                    // 触发自定义的hidden事件，设置状态为hidden
                    $ele.trigger("hidden").data("status", "hidden");
                });

                console.log("silentAnimation hide");
            },
        };
    /****************************    module 1: end    ****************************/


    /****************************    module 2: start    ****************************/
    let cssAnimation =
        {
            _init: function($ele, classname)
            {
                $ele.addClass("transition");

                init($ele, function()
                {
                    $ele.addClass(classname);
                });
            },

            _show: function($ele, classname)
            {
                show($ele, function()
                {
                    // 动画结束后，触发自定义的shown事件，设置状态为shown
                    $ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
                    {
                        $ele.trigger("shown").data("status", "shown");
                    });

                    // 先显示
                    $ele.show();

                    // 后动画过渡
                    setTimeout(function()
                    {
                        $ele.removeClass(classname);
                    });
                });
            },

            _hide: function($ele, classname)
            {
                hide($ele, function()
                {
                    // 然后在动画结束后，隐藏
                    $ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
                    {
                        $ele.hide();

                        // 触发自定义的hidden事件，设置状态为hidden
                        $ele.trigger("hidden").data("status", "hidden");
                    });

                    // 先动画过渡
                    $ele.addClass(classname);
                });
            },

            // 淡入淡出效果
            fade:
                {
                    // 初始化
                    init: function($ele)
                    {
                        cssAnimation._init($ele, "fadeOut");

                        console.log("cssAnimation.fade init");
                    },

                    // 淡入
                    show: function($ele)
                    {
                        cssAnimation._show($ele, "fadeOut");

                        console.log("cssAnimation.fade show");
                    },

                    // 淡出
                    hide: function($ele)
                    {
                        cssAnimation._hide($ele, "fadeOut");

                        console.log("cssAnimation.fade hide");
                    },
                },

            // 上下滑动效果
            slideUpDown:
                {
                    // 初始化
                    init: function($ele)
                    {
                        // 设置高度
                        $ele.height($ele.height());

                        cssAnimation._init($ele, "slideUpDownCollapse");

                        console.log("cssAnimation.slideUpDown init");
                    },

                    // 上下滑动显示
                    show: function($ele)
                    {
                        cssAnimation._show($ele, "slideUpDownCollapse");

                        console.log("cssAnimation.slideUpDown show");
                    },

                    // 上下滑动隐藏
                    hide: function($ele)
                    {
                        cssAnimation._hide($ele, "slideUpDownCollapse");

                        console.log("cssAnimation.slideUpDown hide");
                    },
                },

            // 左右滑动效果
            slideLeftRight:
                {
                    // 初始化
                    init: function($ele)
                    {
                        // 设置宽度
                        $ele.width($ele.width());

                        cssAnimation._init($ele, "slideLeftRightCollapse");

                        console.log("cssAnimation.slideLeftRight init");
                    },

                    // 左右滑动显示
                    show: function($ele)
                    {
                        cssAnimation._show($ele, "slideLeftRightCollapse");

                        console.log("cssAnimation.slideLeftRight show");
                    },

                    // 左右滑动隐藏
                    hide: function($ele)
                    {
                        cssAnimation._hide($ele, "slideLeftRightCollapse");

                        console.log("cssAnimation.slideLeftRight hide");
                    },
                },

            // 淡入淡出+上下滑动效果
            fadeSlideUpDown:
                {
                    // 初始化
                    init: function($ele)
                    {
                        // 设置高度
                        $ele.height($ele.height());

                        cssAnimation._init($ele, "fadeOut slideUpDownCollapse");

                        console.log("cssAnimation.fadeSlideUpDown init");
                    },

                    // 上下滑动显示
                    show: function($ele)
                    {
                        cssAnimation._show($ele, "fadeOut slideUpDownCollapse");

                        console.log("cssAnimation.fadeSlideUpDown show");
                    },

                    // 上下滑动隐藏
                    hide: function($ele)
                    {
                        cssAnimation._hide($ele, "fadeOut slideUpDownCollapse");

                        console.log("cssAnimation.fadeSlideUpDown hide");
                    },
                },

            // 淡入淡出+左右滑动效果
            fadeSlideLeftRight:
                {
                    // 初始化
                    init: function($ele)
                    {
                        // 设置宽度
                        $ele.width($ele.width());

                        cssAnimation._init($ele, "fadeOut slideLeftRightCollapse");

                        console.log("cssAnimation.fadeSlideLeftRight init");
                    },

                    // 左右滑动显示
                    show: function($ele)
                    {
                        cssAnimation._show($ele, "fadeOut slideLeftRightCollapse");

                        console.log("cssAnimation.fadeSlideLeftRight show");
                    },

                    // 左右滑动隐藏
                    hide: function($ele)
                    {
                        cssAnimation._hide($ele, "fadeOut slideLeftRightCollapse");

                        console.log("cssAnimation.fadeSlideLeftRight hide");
                    },
                },
        };
    /****************************    module 2: end    ****************************/


    /****************************    module 3: start    ****************************/
    let jsAnimation =
        {
            _init: function($ele, callback)
            {
                $ele.removeClass("transition");

                init($ele, callback);
            },

            _show: function($ele, method)
            {
                show($ele, function()
                {
                    $ele.stop()[method](function()
                    {
                        // 触发自定义shown事件，设置status状态
                        $ele.trigger("shown").data("status", "shown");
                    });
                });
            },

            _hide: function($ele, method)
            {
                hide($ele, function()
                {
                    $ele.stop()[method](function()
                    {
                        // 触发自定义hidden事件，设置status状态
                        $ele.trigger("hidden").data("status", "hidden");
                    });
                });
            },

            _cusInit: function($ele, oProperty)
            {
                let styles = {};

                for (let i in oProperty)
                {
                    styles[i] = $ele.css(i);
                }

                // 保存元素的宽度信息
                $ele.data("styles", styles);

                jsAnimation._init($ele, function()
                {
                    $ele.css(oProperty);
                });
            },

            _cusShow: function($ele)
            {
                show($ele, function()
                {
                    $ele.show();

                    $ele.stop().animate($ele.data("styles"), function()
                    {
                        // 动画结束后，触发shown事件，设置status状态
                        $ele.trigger("shown").data("status", "shown");
                    });
                });
            },

            _cusHide: function($ele, oProperty)
            {
                hide($ele, function()
                {
                    $ele.stop().animate(oProperty, function()
                    {
                        $ele.hide();

                        // 动画结束后，触发hidden事件，设置status状态
                        $ele.trigger("hidden").data("status", "hidden");
                    });
                });
            },

            // 淡入淡出效果
            fade:
                {
                    // 初始化
                    init: function($ele)
                    {
                        jsAnimation._init($ele);

                        console.log("jsAnimation.fade init");
                    },

                    // 淡入
                    show: function($ele)
                    {
                        jsAnimation._show($ele, "fadeIn");

                        console.log("jsAnimation.fade show");
                    },

                    // 淡出
                    hide: function($ele)
                    {
                        jsAnimation._hide($ele, "fadeOut");

                        console.log("jsAnimation.fade hide");
                    },
                },

            // 上下滑动效果
            slideUpDown:
                {
                    // 初始化
                    init: function($ele)
                    {
                        jsAnimation._init($ele);

                        console.log("jsAnimation.slideUpDown init");
                    },

                    // 下滑显示
                    show: function($ele)
                    {
                        jsAnimation._show($ele, "slideDown");

                        console.log("jsAnimation.slideUpDown show");
                    },

                    // 上滑隐藏
                    hide: function($ele)
                    {
                        jsAnimation._hide($ele, "slideUp");

                        console.log("jsAnimation.slideUpDown hide");
                    },
                },

            // 左右滑动效果
            slideLeftRight:
                {
                    // 初始化
                    init: function($ele)
                    {
                        jsAnimation._cusInit($ele, {
                            "width": 0,
                            "padding-left": 0,
                            "padding-right": 0,
                        });

                        console.log("jsAnimation.slideLeftRight init");
                    },

                    // 显示
                    show: function($ele)
                    {
                        jsAnimation._cusShow($ele);

                        console.log("jsAnimation.slideLeftRight show");
                    },

                    // 隐藏
                    hide: function($ele)
                    {
                        jsAnimation._cusHide($ele, {
                            "width": 0,
                            "padding-left": 0,
                            "padding-right": 0,
                        });

                        console.log("jsAnimation.slideLeftRight hide");
                    },
                },

            // 淡入淡出+上下滑动
            fadeSlideUpDown:
                {
                    // 初始化
                    init: function($ele)
                    {
                        jsAnimation._cusInit($ele, {
                            "opacity": 0,
                            "height": 0,
                            "padding-top": 0,
                            "padding-bottom": 0,
                        });

                        console.log("jsAnimation.fadeSlideUpDown init");
                    },

                    // 显示
                    show: function($ele)
                    {
                        jsAnimation._cusShow($ele);

                        console.log("jsAnimation.fadeSlideUpDown show");
                    },

                    // 隐藏
                    hide: function($ele)
                    {
                        jsAnimation._cusHide($ele, {
                            "opacity": 0,
                            "height": 0,
                            "padding-top": 0,
                            "padding-bottom": 0,
                        });

                        console.log("jsAnimation.fadeSlideUpDown hide");
                    },
                },

            // 淡入淡出+左右滑动
            fadeSlideLeftRight:
                {
                    // 初始化
                    init: function($ele)
                    {
                        jsAnimation._cusInit($ele, {
                            "opacity": 0,
                            "width": 0,
                            "padding-left": 0,
                            "padding-right": 0,
                        });

                        console.log("jsAnimation.fadeSlideLeftRight init");
                    },

                    // 显示
                    show: function($ele)
                    {
                        jsAnimation._cusShow($ele);

                        console.log("jsAnimation.fadeSlideLeftRight show");
                    },

                    // 隐藏
                    hide: function($ele)
                    {
                        jsAnimation._cusHide($ele, {
                            "opacity": 0,
                            "width": 0,
                            "padding-left": 0,
                            "padding-right": 0,
                        });

                        console.log("jsAnimation.fadeSlideLeftRight hide");
                    },
                },
        };

    /****************************    module 3: end    ****************************/


    /****************************    module 4: start    ****************************/
    function init($ele, hiddenCallback)
    {
        if ($ele.is(":hidden") || $ele.css("visibility") === "hidden")
        {
            $ele.data("status", "hidden");

            typeof hiddenCallback === "function" ? hiddenCallback() : 1;
        }
        else
        {
            $ele.data("status", "shown");
        }
    }


    function show($ele, callback)
    {
        // 若已显示，则返回
        if ($ele.data("status") === "show" || $ele.data("status") === "shown")
        {
            return;
        }

        // 触发自定义的show事件，设置状态为show
        $ele.trigger("show").data("status", "show");

        callback();
    }


    function hide($ele, callback)
    {
        // 若已隐藏，则返回
        if ($ele.data("status") === "hide" || $ele.data("status") === "hidden")
        {
            return;
        }

        // 触发自定义的hide事件，设置状态为hide
        $ele.trigger("hide").data("status", "hide");

        callback();
    }

    /****************************    module 4: end    ****************************/


    /****************************    module 5: start    ****************************/
    let defaults = {css: false, js: false, animation: "fade"};

    function showHide($ele, options)
    {
        let mode = null;

        // 使用CSS动画
        if (options.css && MUTAO.isSupported)
        {
            mode = cssAnimation[options.animation] || cssAnimation[defaults.animation];
        }
        // 使用JS动画
        else if (options.js)
        {
            mode = jsAnimation[options.animation] || jsAnimation[defaults.animation];
        }
        // 不使用动画
        else
        {
            mode = silentAnimation;
        }

        mode.init($ele);

        return {
            show: $.proxy(mode.show, this, $ele),
            hide: $.proxy(mode.hide, this, $ele),
        };
    }


    $.fn.extend({
        showHide: function(args)
        {
            return this.each(function()
            {
                let $this = $(this),
                    mode = $this.data("showHide"),
                    options = $.extend({}, defaults, typeof args === "object" && args);


                if (!mode)
                {
                    $this.data("showHide", mode = showHide($this, options));
                }


                (typeof mode[args]) === "function" ? mode[args]() : 1;
            });
        },
    });
    /****************************    module 5: end    ****************************/

})(jQuery);


transition.js如下：

/**
 *  解决transitionend事件的兼容性问题
 *  **/

// console.log(document.body.style.transition);


(function()
{
    // transitionend事件名
    let transitionendEvent =
        {
            transition: "transitionend",
            MozTransition: "transitionend",
            WebkitTransition: "webkitTransitionEnd",
            OTransition: "oTransitionEnd otransitionend",
        };

    let transitionend = "",
        isSupported = false;

    for (let i in transitionendEvent)
    {
        if (document.body.style[i] !== undefined)
        {
            transitionend = transitionendEvent[i];
            isSupported = true;
            break;
        }
    }

    // 全局变量MUTAO
    window.MUTAO = window.MUTAO || {};

    window.MUTAO =
        {
            transitionend: transitionend,
            isSupported: isSupported,
        };
})();
我学习太差被关起来了 2020-08-16
源自：实战：下拉菜单组件化   3-1 用showHide改写dropdown模块
20
收起

正在回答

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

2回答
好帮手慕慕子 回答被采纳获得+3积分 2020-08-17 16:49:18

同学你好，因为获取元素的类名书写有误，所以没有实现淡入淡出的效果。建议修改：

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

修改后的效果如下：

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

因为同学题目描述的是为什么下拉菜单不显示，所以老师会针对如何显示下拉菜单，给出最简单的解决方法。

非常抱歉给同学造成了觉得老师敷衍的感觉，其实同学提问的每一个问题，老师们都非常认真的做出解答，老师就是抱着帮助同学解决问题的心态进行答疑的，希望同学能够理解一下， 以后提问时，可以描述的再稍微详细一点，例如：为什么下拉菜单无法显示，设置的淡入淡出效果没有实现。 只有老师和同学之间相互配合，才能准确高效的帮助同学解决问题。

祝学习愉快~

0
收起回答
好帮手慕慕子 2020-08-17 11:35:20

同学你好，需要给导航栏添加top-on类名时，设置dropDown-layer 的display属性为block，让其显示出来，建议修改：

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

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

0
收起回答
  • 提问者 我学习太差被关起来了 #1
    错误回答。视频中的老师明确把这行代码删除了，依然能够运行。即使加上这行CSS代码，也没有fade淡入淡出的动画效果。 $layer.showHide({ css: true, js: true, animation: "fade", }); 助教态度这么敷衍的吗？难道连视频都不看？代码都不运行一下？
    2020-08-17 15:48:58
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

select下拉菜单显示的个数可以设置吗？
27 0 3
顶部下拉菜单问题
0 1 4
请问为什么移入二级菜单还是没显示出来。
18 0 3
滑过主菜单显示问题
0 0 4
第一行菜单的显示隐藏效果，为什么我的只对第一个有效果呢？
0 0 5

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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