5：00左右我点击页面没有效果

视频里老师是点击菜单以后显示一下因为冒泡会自动隐藏，可是我的却在显示以后不管点哪里都不会隐藏

<!DOCTYPE html>
<html lang="en">

<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;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

        .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);*/
        }

        body {
            background-color: #eee;
        }

        /* css 绘制箭头  */
        .icon-triangle-down {
            width: 0px;
            height: 0px;
            border: 4px solid #535b62;
            border-right-color: transparent;
            _border-right-color: yellow;
            border-left-color: transparent;
            _border-left-color: yellow;
            border-bottom: none;
        }

        .menu-active .icon-triangle-down {
            border-top: none;
            border-bottom: 4px solid #f11c1c;
        }

        @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*="-active"] .dropdown-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;
        }

        .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;
        }
    </style>
</head>

<body>

    <div class="menu dropdown fl" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow icon transition"></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>

    <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').dropdown({
            event:'click',
            css3: true,
            js: true,
        }); //模块封装，调用dropdown.js下的方法
    </script>
</body>

</html>

transition.js

(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
    };
})();

showHide.js

(function ($) {
    // 'use strict';

    var transition = window.mt.transition;

    function init($elem, hiddenCallback) {
        if ($elem.is(':hidden')) { //hidden
            $elem.data('status', 'hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();
        } else { //shown
            $elem.data('status', 'shown');
        }
    }

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

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

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

    var css3 = {
        fade: {
            init: function ($elem) {
                css3._init($elem, 'fadeOut');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut');
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut');
            }
        },
        slideUpDown: {
            init: function ($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'slideUpDownCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'slideUpDownCollapse');
            },
            hide: function ($elem) {
                css3._hide($elem, 'slideUpDownCollapse');
            }
        },
        slideLeftRight: {
            init: function ($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'slideLeftRightCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'slideLeftRightCollapse');
            },
            hide: function ($elem) {
                css3._hide($elem, 'slideLeftRightCollapse');
            }
        },
        fadeSlideUpDown: {
            init: function ($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'fadeOut slideUpDownCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut slideUpDownCollapse');
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut slideUpDownCollapse');
            }
        },
        fadeSlideLeftRight: {
            init: function ($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'fadeOut slideLeftRightCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut slideLeftRightCollapse');
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut slideLeftRightCollapse');
            }
        }
    };

    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.data('status', 'shown').trigger('shown');
            });
            $elem.show();
            setTimeout(function () {
                $elem.removeClass(className);
            }, 20);
        });
    };

    css3._hide = function ($elem, className) {
        hide($elem, function () {
            $elem.off('transition.end').one('transition.end', function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
            $elem.addClass(className);
        });
    };

    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-down': 0
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-down': 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, hiddenCallback) {
        $elem.removeClass('transition');
        init($elem, hiddenCallback);
    };

    js._customInit = function ($elem, options) {
        var styles = {};

        for (var p in options) {
            styles[p] = $elem.css(p);
        }
        $elem.data('styles', styles);

        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('styles'), 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) { //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($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]();
                }
            });
        }
    });

    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;
})(jQuery);

dropdown.js

(function ($) {
    'use strict';

    function Dropdown(elem, options) {
        this.$elem = $(elem),
            this.$layer = this.$elem.find('.dropdown-layer'),
            this.activeClass = options.active + '-active';

        this.$layer.showHide(options);

        if (options.event === 'click') {//click
            this.$elem.on('click', $.proxy(this.show, this));
            $(document).on('click', $.proxy(this.hide, this));
        } else{
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    }
    Dropdown.DEFAULTS = {
        event: 'hover', //click
        css3: false,
        js: false,
        animation: 'fade',
        active: 'dropdown'
    };
    Dropdown.prototype.show = function () {
        this.$elem.addClass(this.activeClass);
        this.$layer.showHide('show');
    }
    Dropdown.prototype.hide = function () {
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    }

    $.fn.extend({
        dropdown: function (option) {
            return this.each(function () {
                var options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), option);
                new Dropdown(this, options);
            });
        }
    });
})(jQuery);

Aurora_Meteor 2020-04-13

源自：实战：下拉菜单组件化 3-3 用构造函数的形式重写dropdown模块--触发方式和延迟显示

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2020-04-14 09:44:30

同学你好，问题解答如下：

1、关于这个问题

https://class.imooc.com/course/qadetail/213606

相关老师会尽快进行回复的，不要着急。

2、transition.end和'transitionend'都是正确的。因为‘transitionend’是直接添加事件，所以需要添加引号变为字符串，而封装了transition.js文件之后，引入的是变量，所以不需要添加引号，直接使用即可。

祝学习愉快！

收起回答

好帮手慕星星 2020-04-13 19:20:20

同学你好，是过渡动画没有完成导致隐藏的时候添加不上fadeOut类。参考修改：

showHide.js中

transition.end是对象的形式，不需要添加引号变为字符串，否则无意义。

这样修改之后点击就会出现显示然后隐藏的效果，自己再测试下，祝学习愉快！

收起回答

提问者 Aurora_Meteor #1

抱歉老师，我的问题还没有解决就继续往后学了，我记得在一个问题里面还是什么地方是要把这里改成'transitionend'，把中间的那个点去掉就可以了，我已经学到3-6了，但是还是有一些问题。现在的问题是这个了：https://class.imooc.com/course/qadetail/213606 我刚刚按您说的这个修改了以后实现了和源码一样的效果，就是在服务器下打开我的文件后hover效果可以实现，动画也有，但是那个loading图片就是不加载

2020-04-13 21:08:07
提问者 Aurora_Meteor #2

另外，我不知道这里是把'transition.end'改成transition.end才对还是改成transition.end和'transitionend'都正确了

2020-04-13 21:09:15