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

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

dropdown.html:

<!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:

/*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:

(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:

(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:

(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:

[
	{
		"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下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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