为什么我的按需加载中列表没有显示完全，为什么按需加载第一次加载时图片有动画而列表没有动画？

为什么我的按需加载中列表没有显示完全，为什么按需加载第一次加载时图片有动画而列表没有动画？

dropdown.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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉菜单</title>
        <style type="text/css">
            /*公共样式*/
            body{
                background-color: lightgrey;
            }
            .dropdown{
                position: relative;
            }
            .dropdown-toggle{
                position: relative;
                z-index: 2;
            }
            .dropdown-arrow{
                display: inline-block;
                background-repeat: no-repeat;
                vertical-align: middle;
            }
            .dropdown-layer{
                overflow: hidden;
                display: none;
                z-index: 1;
                position: absolute;
            }
            .dropdown-left{
                left: 0;
                right: auto;
            }
            .dropdown-right{
                right: 0;
                left: auto;
            }
            /*dropdown*/
            .menu .dropdown-toggle{
                height: 100%;
                display: block;
                padding: 0 26px 0 12px;
                border-left: 1px solid #F3F5F7;
                border-right: 1px solid #F3F5F7;
            }
            .menu .dropdown-arrow{
                background-image: url();
            }
            .menu .dropdown-layer{
                top: 100%;
                background-color: #fff;
                border: 1px solid #cdd0d4;
                margin-top: -1px;
            }
            .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;
            }
            .ml50{
                margin-left: 200px;
            }
            .fadeOut{
                visibility: hidden;
                opacity: 0;
            }
            .slidUpDownCollapse{
                height: 0!important;
                padding-top: 0!important;
                padding-bottom: 0!important;
            }
            .slidLeftRightCollapse{
                width: 0!important;
                padding-left: 0!important;
                padding-right: 0!important;
            }
            .transition{
                transition: all 0.5s;
            }
            .btn{
                margin-left: 50px;
            }
            .dropdown-loading{
                width: 32px;
                height: 32px;
                background: url(img/QQ浏览器截图20181106215903.png) no-repeat;
                margin: 20px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/base.css"/>
    </head>
    <body>
        <button id="btn_show" class="btn">点我显示</button>
        <button id="btn_hide" class="btn">点我隐藏</button>
        <div class="menu dropdown fl ml50" data-active = "menu" data-load='test/dropdown.json'>
            <a class="dropdown-toggle">
                我的慕淘<i class="dropdown-arrow"></i>
            </a>
            <ul class="dropdown-left dropdown-layer transition">
                <li class="dropdown-loading"></li>
            </ul>
            <!--<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>-->
        </div>
        <div class="menu dropdown fl ml50" data-active = "menu">
            <a class="dropdown-toggle">
                我的慕淘<i class="dropdown-arrow"></i>
            </a>
            <ul class="dropdown-left dropdown-layer transition">
                <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>
             
        </div>
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.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>
    <script type="text/javascript">
        $('.dropdown').on('dropdown-show',function(e){
            var $this=$(this),
                dataLoad=$this.data('load');
            if(!dataLoad) return;
            if(!$this.data('loaded')){
                var $layer=$this.find('.dropdown-layer');
//              $layer.css('height','auto');
                var html='';
                $.getJSON($this.data('load'),function(data){
                    setTimeout(function(){
                        for(var i=0;i<data.length;i++){
                            html+=`<li>
                            <a href=${data[i].url} target="_blank" class="menu-item">${data[i].name}</a>
                            </li>`;
                        }
                        $layer.html(html);
                        $this.data('loaded',true);
                    },1000);
                     
                })
            }
        });
         
        $('.dropdown')._dropdown({
            css3:true,
            animation:'slideUpDown',
            event:'hover',
        });
         
         
         
        $('#btn_show').on('click',function(){
            $('.dropdown')._dropdown('show');
        });
        $('#btn_hide').on('click',function(){
            $('.dropdown')._dropdown('hide');
        });
    </script>
    </body>
</html>

base.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*css reset*/
*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

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
(function(){
    var transitionEndEventName={
        transition:'transitionend',
        MozTransition:'transitionend',
        WebkitTransition:'webkitTransitionEnd',
        OTransition:'oTransitionEnd otransitionend',
    }
    var transitionEnd='';
    var 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:

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
(function($){
    var transition=window.mt.transition;
 
    function init($elem,hiddenCallback){
        if($elem.is(':hidden')){
            $elem.data('status','hidden');
            if(typeof hiddenCallback==="function") hiddenCallback();
        }else{
            $elem.data('status','shown');
        }
    }
    function show($elem,callback){
        if($elem.data('status')==='show'||$elem.data('status')==='shown') return;
        $elem.data('status','show').trigger('show');
        callback();
    }
    function hide($elem,callback){
        if($elem.data('status')==='hide'||$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,'slidUpDownCollapse');
            },
            show:function($elem){
                css3._show($elem,'slidUpDownCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'slidUpDownCollapse');
            }
        },
        slideLeftRight:{
            init:function($elem){
                $elem.width($elem.width());
                css3._init($elem,'slidLeftRightCollapse');
            },
            show:function($elem){
                css3._show($elem,'slidLeftRightCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'slidLeftRightCollapse'); 
            }
        },
        fadeSlideUpDown:{
            init:function($elem){
                $elem.height($elem.height());
                css3._init($elem,'fadeOut slidUpDownCollapse');
            },
            show:function($elem){
                css3._show($elem,'fadeOut slidUpDownCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'fadeOut slidUpDownCollapse');   
            }
        },
        fadeSlideLeftRight:{
            init:function($elem){
                $elem.width($elem.width());
                css3._init($elem,'fadeOut slidLeftRightCollapse');
            },
            show:function($elem){
                css3._show($elem,'fadeOut slidLeftRightCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'fadeOut slidLeftRightCollapse');
            }
        },
    }
    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);
            },10)
        })
    }
    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._inite($elem);
            },
            show:function($elem){
                js._show($elem,'fadeIn');
            },
            hide:function($elem){
                js._hide($elem,'fadeOut');
            }
        },
        slideUpDown:{
            init:function($elem){
                js._inite($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._inite=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._inite($elem,function(){
            $elem.css(options);
        })
    }
    js._customShow=function($elem){
        show($elem,function(){
            $elem.show();
            $elem.stop().animate($elem.data('styles'),function(){
                $elem.data('status','shown').trigger('shown');
            })
        })
    }
    js._show=function($elem,mode){
        show($elem,function(){
            $elem.stop()[mode](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',
        active:'menu'
    }
    function showHide($elem,options){
        var mode=null;
        if(options.css3&&transition.isSupport){
            mode=css3[options.animation]||css3[defaults.animation];
            console.log('css3');
        }else if(options.js){
            mode=js[options.animation]||js[defaults.animation];
            console.log('js');
        }else{
            mode=silent;
            console.log('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);
                var _mode=$this.data('showHide');
                var options=$.extend({},defaults,typeof option==='object'&& option);
//              console.log(options);
                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:

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
(function($){
    function Dropdown($elem,options){
            this.$elem=$elem;
            this.options=options;
            this.$layer=this.$elem.find('.dropdown-layer');
            this.activeClass=options.active+'-active';
            this._init();
             
    }
    Dropdown.DEFAULTS={
        css3:false,
        js:false,
        animation:'fade',
        event:'hover',
        delay:0,
        active:'dropdown'
    }
    Dropdown.prototype._init=function(){
        var self=this;
         
        this.$layer.showHide(this.options);
        this.$layer.on("show shown hide hidden",function(e){
            self.$elem.trigger('dropdown-'+e.type);
        });
 
        if(this.options.event==="click"){
            setTimeout(function(){
                 
            })
            this.$elem.click(function(e){
                self.show();
                e.stopPropagation();
            });
            $(document).click($.proxy(this.hide,this));
        }else{
            this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
        }
    };
    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(){
                var $this=$(this),
                    dropdown=$this.data('dropdown'),
                    options=$.extend({},Dropdown.DEFAULTS,$(this).data(),typeof option==='object'&& option);
//              var dropdown=new Dropdown(this,options);
                 
                if(!dropdown){
                    $this.data('dropdown',dropdown=new Dropdown($this,options));
                }
                 
                if(typeof dropdown[option]==='function'){
                    dropdown[option]();
                }
            })
        }
    })
})(jQuery);

dropdown.jason:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
    {
        "url":"###",
        "name":"已买到的宝贝"
    },
    {
        "url":"###",
        "name":"我的足迹"
    },
    {
        "url":"###",
        "name":"我的优惠券"
    }
]
qq_林二爷_0 2018-11-06
源自：实战：电商网站下拉菜单   3-5 下拉菜单的按需加载
0
收起

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

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

2回答
好帮手慕星星 2018-11-11 11:47:27

在初始化的时候，就把下拉列表的高度添加上了，但是这个高度不够高，所以显示不完整：

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

在鼠标移入主菜单的时候，添加的样式只是显示与隐藏，高度还是72px：

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

所以把初始化时候的高度去掉，下拉菜单显示的时候，文字会把盒子撑开显示。

自己可以在控制台看一下。

0
收起回答
好帮手慕星星 2018-11-07 10:49:41

1、初始化的时候将高度去掉：

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

2、本身列表就是没有动画的，所以在加载的时候有一个loading图片，这样加载完成之后就直接显示了。

祝学习愉快！

0
收起回答
  • 提问者 qq_林二爷_0 #1
    初始化的时候高度去掉，动画不就没了吗？？
    2018-11-09 20:24:19
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

预加载这个js跟上一节的图片预加载有什么区别
23 0 3
关于预加载和按需加载
41 0 3
首页的contentList.js中的滚动加载代码需要修改吗?
11 0 3
老师我还是不明白执行fetch(url)就怎么把图片加载了
32 0 3
图片没有加到页面中，就可以触发load事件。而js文件为什么就不行？
2 0 5

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

组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。

了解课程

本课精华内容

问答 作业

这位老师讲得太棒了！语速适中，咬字清晰，通俗易懂，深入浅出，还很亲切，满分！

0 2

所谓的异步请老师解释

1 20

请问老师关于这个疑问

0 20

老师安装问题

0 16

请问老师为什么不会执行

0 16

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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