老师帮我看下哪里出问题了代码报错

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>dropDown</title>
    <style>
        .dropdown {
            position: relative;
            /* margin: 150px; */
        }
 
        .dropdown-toggle {
            position: relative;
            z-index: 2;
        }
 
        /* 下拉箭头 */
        .dropdown-arrow {
            display: inline-block;
            /* text-align: center; */
            vertical-align: text-top;
             
        }
 
        .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 {
            margin-left: 5px;
        }
 
        .menu .dropdown-layer {
            /* top: 44px; */
            top: 100%;
            border: 1px solid #cdd0d4;
            /* border-top: none; */
            background-color: #fff;
        }
 
        .menu-item {
            display: block;
            height: 30px;
            padding: 0 12px;
            line-height: 30px;
            white-space: nowrap;
            color: #4d555d;
        }
 
        .menu-item:hover {
            background-color: #f3f5f7;
        }
 
        /* css hover 实现显示隐藏 */
 
        .menu-active .dropdown-toggle {
            background-color: #fff;
            border-color: #cdd0d4;
        }
 
        /* 下拉箭头效果 */
        [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.3s;
        }
        /* .menu-active .dropdown-layer {
            display: block;
        } */
 
        /* 显示隐藏效果 */
 
        .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="iconfont dropdown-arrow transition">&#xe638;</i></a>
        <ul class="dropdown-layer dropdown-left">
            <li><a href="###" class="menu-item">已买到宝贝</a></li>
            <li><a href="###" class="menu-item">我的足迹</a></li>
        </ul>
    </div>
    <div class="menu dropdown fl" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘2<i class="iconfont dropdown-arrow transition">&#xe638;</i></a>
        <ul class="dropdown-layer dropdown-left">
            <li><a href="###" class="menu-item">已买到宝贝2</a></li>
            <li><a href="###" class="menu-item">我的足迹2</a></li>
        </ul>
    </div>
    <div class="menu dropdown fl" data-active="menu">
        <a href="javascript:;" class="dropdown-toggle">我的慕淘3<i class="iconfont dropdown-arrow transition">&#xe638;</i></a>
        <ul class="dropdown-layer dropdown-left">
            <li><a href="###" class="menu-item">已买到宝贝3</a></li>
            <li><a href="###" class="menu-item">我的足迹3</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>
 
        $('.dropdown').dropdown({
            event: 'hover',
            css3: true, 
            js: true,
            animation: 'slideUpDown',
            active: 'menu',
            delay: 0              
        });
         
 
    </script>
</body>
 
</html>

(function ($) {
    'use strict';
 
    // Constructor
    function Dropdown(elem, options) {
        this.$elem = $(elem),
            this.$layer = this.$elem.find('.dropdown-layer'),
            this.activeClass = options.active + '-active';
        this.$layer.showHide(options);
 
        var self = this;
        if (options.event === 'click') {
            this.$elem.on('click', function (e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click', $.proxy(this.hide, this));
        } else {
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        };
    }
    Dropdown.DEFAULTS = {
        event: 'hover',
        css3: true,
        js: true,
        animation: 'fade',
        delay: 0,
        active: 'dropdown'
    };
    Dropdown.prototype.show = function () {
        var self = this;
        if (this.options.delay) {
             this.timer = setTimeout(function () {
                _show();
            }, this.options.delay);
        } else {
            _show();
        }
        function _show() {
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
        }
    };
    Dropdown.prototype.hide = function () {
        if (this.options.delay) {
            clearTimeout(this.timer);
        };            
        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    };
 
    $.fn.extend({
        dropdown: function (option) {
            return this.each(function () {
                console.log($(this).data());
                var options = $.extend({}, Dropdown.DEFAULTS, $(this).data(), option);
                new Dropdown(this, options);
            });
        }
    });
 
 
})(jQuery);

下拉菜单没反应

琥珀_2020 2020-01-02

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

收起

4回答

好帮手慕言回答被采纳获得+3积分 2020-01-02 17:39:29

同学你好，相似的问题在同学的另一个提问里解答了，快去查看吧，链接：http://class.imooc.com/course/qadetail/182788

祝学习愉快~

收起回答

提问者琥珀_2020 2020-01-02 13:38:37

不过我不懂 this.options = options; 这行代码

为什么要这么写

收起回答

提问者琥珀_2020 #1

为什么老师说 delay 是 options 的没有听懂

2020-01-02 13:39:21

提问者琥珀_2020 2020-01-02 13:38:03

找到问题了

function Dropdown(elem, options) {
        this.$elem = $(elem);
        this.options = options;
        this.$layer = this.$elem.find('.dropdown-layer');
        this.activeClass = options.active + '-active';
        this.$layer.showHide(options);
        var self = this;
 
        if (options.event === 'click') {
            this.$elem.on('click', function (e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click', $.proxy(this.hide, this));
 
        } else {
            this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
        }
    };