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

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

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

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

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


我的程序目录如下：

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


index.html如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
/****************  顶部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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/*
    公共样式
*/
 
/*定宽样式*/
.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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
    重置样式
*/
 
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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"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如下：

1
2
3
4
5
$().ready(function()
{
    // 下拉菜单模块
    $(".dropDown").dropDown();
});


showHide.js如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
(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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 *  解决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
请问为什么移入二级菜单还是没显示出来。
18 0 3
顶部下拉菜单问题
0 1 4
滑过主菜单显示问题
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
您的移动学习伙伴

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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