关于按需加载的问题

为什么css样式鼠标滑过显示的时候没起到作用？我已经设置好了

为什么每一个dropdown-layer的内容分别创建好之后能够分别添加到每一个dropdown-layer，什么代码起到的效果？（为什么不需要each）

@charset "utf-8";
/* CSS Document */
.focus{width: 100%;height: 504px;background-color: #fff;margin-bottom: 8px;color: white;}
/*商品详情主结构*/
.category{width: 208px;margin-top: -62px;font-size: 14px;position: relative;}
.category-title{display: block;height: 54px;padding: 0 20px;background-color: #c81414;line-height: 54px;color: #fff;}
.category-list{height: 512px;background-color: #f01414;}
.category .dropdown-toggle{height: 36px;line-height: 36px;padding-left: 16px;color: #fff;position: relative;}
.category .dropdown-link{color: #fff;}
.category .dropdown-arrow{position: absolute;top: 12px;right: 12px;font-family: simsun;font-weight: bold;font-style: normal;}
/*商品详情交互*/
.category-active .dropdown-toggle{background-color: #fff;color: #f01414;}
.category-active .dropdown-link{color: #f01414;}
.category-active .dropdown-arrow{transform: rotate(0deg) !important;}
/*商品详情下拉菜单*/
.category .dropdown{position: static;}
.category .dropdown-layer{top: 54px;left: 100%;width: 744px;padding: 8px 0 31px 0;min-height: 473px;
	background-color: #fff;box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.category-detail{line-height: 20px;width: 744px;/*设置这个宽度防止动画时东西掉下来*/}
.category-detail-title{margin-top: 24px;width: 84px;padding-right: 16px;border-right: 1px solid #d9dde1;text-align: right;}
.category-detail-title-link{color: #07111b;font-weight: bold;}
.category-detail-item{margin-top: 24px;padding-left: 15px;width: 592px;}
.category-detail-item .link{margin-right: 16px;display: inline-block;/*保证整体换行，当内容较多时*/}
/*按需加载*/
.category .dropdown-loading{margin: 220px auto;}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/focus.css">
<style>
	/*主体左边*/
	.nav{background-color: #f3f5f7;border-bottom: 1px solid #cdd0d4;}
	.nav-box{height: 44px;line-height: 44px;font-size: 12px;}
	.nav-site-login{color: red;margin-left: 14px;}
	.nav-site-sign{color: #4d555d;margin-left: 10px;}
	/*下拉菜单独有样式*/
	.menu .dropdown-toggle{color: #4d555d;display: block;padding: 0 13px 0 12px;height: 100%;
		border-left: 1px solid #f3f5f7;border-right: 1px solid #f3f5f7;background-color: #f3f5f7;}
	.menu .dropdown-arrow{margin-left: 5px;}
	.menu .dropdown-layer{top: 43px;border: 1px solid #cdd0d4;background-color: #fff;}
	.menu-item{display: block;height: 30px;line-height: 30px;padding: 0 12px;white-space: nowrap;color: #4d555d;}
	.menu-item:hover{background-color: #f3f5f7;}
	/*交互效果，兼容IE6*/
	.menu-active .dropdown-toggle{background-color:#fff;border-color:#cdd0d4;}
	/*.menu-active .dropdown-layer{display: block;}*//*封装shoeHide之后改写dropdown时删除*/
	/*头部区域logo样式*/
	.top{width: 100%;height: 124px;background-color: #f3f5f7;}
	.header-logo{display: block;width: 136px;height: 48px;margin-left: 15px;
		background-image: url("img/header-logo.png");background-repeat: no-repeat;}
	/*头部区域search样式*//*组件化，如果复用搜索框*/
	.search{position: relative;border: 1px solid #cfd2d5;}
	.search-inputbox{width: 585px;height: 40px;line-height: 40px;padding: 0 10px;background-color: #fff;border: none;}
	.search-btn{width: 73px;height: 40px;line-height: 40px;background-color: #07111b;font-size: 14px;color: white;text-align: center;
		border: none;cursor: pointer;}
	.search-layer{position: absolute;top: 100%;left: -1px;width: 100%;border: 1px solid #cfd2d5;background-color: #fff;display: none;}
	.search-layer-item{height: 24px;line-height: 24px;cursor: pointer;padding: 0 10px;}
	.search-layer-item:hover{background-color: #f3f5f7;}
	/*头部区域search样式*/
	.header-logo,.top .search,.top .cart{margin-top: 36px;}
	.top .search{margin-left: 145px;}
	/*主导航区域样式*/
	.nav-mian{width: 100%;height: 48px;background-color: #07111b;margin-bottom: 8px;}
	.nav-mian .link:first-of-type{text-indent: 182px;}
	.nav-mian .link{color: #fff;font-size: 14px;line-height: 48px;margin-left: 50px;}
</style>
</head>

<body>
<!--导航栏-->	
<div class="nav">
	<div class="nav-box container clearfixed">
		<ul class="fl clearfixed">
			<li class="fl"><a href="#" class="nav-site-login">亲，请登录</a></li>
			<li class="fl"><a href="#" class="nav-site-sign link">免费注册</a></li>
			<li class="fl"><a href="#" class="nav-site-sign link">手机逛慕淘</a></li>
		</ul>
		<ul class="fr clearfixed">
			<li class="menu dropdown fl" data-active="menu">
				<a href="#" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow iconfont transition">&#xe87e;</i></a>
				<!--不需要兼容IE6的时候-->
				<!--<i class="dropdown-arrow iconfont icon-xialajiantouxiao"></i>-->
				<ul class="dropdown-layer dropdown-left">
					<li><a href="#" class="menu-item link">已买到的宝贝</a></li>
					<li><a href="#" class="menu-item link">我的足迹</a></li>
				</ul>
			</li>
			<li class="menu dropdown fl" data-active="menu">
				<a href="#" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow iconfont transition">&#xe87e;</i></a>
				<ul class="dropdown-layer dropdown-left">
					<li><a href="#" class="menu-item link">收藏的宝贝</a></li>
					<li><a href="#" class="menu-item link">收藏的店铺</a></li>
				</ul>
			</li>
			<li class="menu dropdown fl" data-active="menu">
				<a href="#" class="dropdown-toggle link transition">商品分类<i class="dropdown-arrow iconfont transition">&#xe87e;</i></a>
			</li>
			<li class="menu dropdown fl" data-active="menu" data-load="json/dropdown.json">
				<a href="#" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow iconfont transition">&#xe87e;</i></a>
				<ul class="dropdown-layer dropdown-left">
					<li class="dropdown-loading"></li>
					<!--<li><a href="#" class="menu-item link">免费开店</a></li>
					<li><a href="#" class="menu-item link">已卖出的宝贝</a></li>
					<li><a href="#" class="menu-item link">出售中的宝贝</a></li>
					<li><a href="#" class="menu-item link">卖家服务市场</a></li>
					<li><a href="#" class="menu-item link">卖家培训中心</a></li>
					<li><a href="#" class="menu-item link">体验中心</a></li>-->
				</ul>
			</li>
			<li class="menu dropdown fl" data-active="menu">
				<a href="#" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow iconfont transition">&#xe87e;</i></a>
				<ul class="dropdown-layer dropdown-right">
					<li><a href="#" class="menu-item link">消费者客服</a></li>
					<li><a href="#" class="menu-item link">卖家客服</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<!--头部-->
<div class="top">
	<div class="container clearfixed">
		<h1 class="fl text-hidden"><a href="#" class="header-logo">慕课网</a></h1>
		<!--h1的作用是利于搜索引擎优化SEO，提高网站排名，一般一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签-->
		<div class="fl search" id="header-search">
			<form action="https://s.taobao.com/search" class="search-form">
				<input type="text" name="q" placeholder="想搜索的商品" autocomplete="off" class="search-inputbox fl">
				<input type="submit" value="搜索" class="search-btn fl">
			</form>
			<ul class="search-layer">
				<!--<li class="search-layer-item text-ellipsis">111</li>
				<li class="search-layer-item text-ellipsis">111</li>-->
			</ul>
		</div>
		<div class="fr cart"></div>
	</div>	
</div>
<!--主导航-->	
<div class="nav-mian">
	<div class="container clearfixed">
		<a href="#" class="fl link">数码城</a>
		<a href="#" class="fl link">天黑黑</a>
		<a href="#" class="fl link">团购</a>
		<a href="#" class="fl link">发现</a>
		<a href="#" class="fl link">二手特价</a>
		<a href="#" class="fl link">名品汇</a>
	</div>	
</div>
<!--focus-->	
<div class="focus">
	<div class="container">
		<div class="category fl">
			<a href="###" target="_blank" class="category-title"><!--<i class="icon">&#xe608;</i>-->商品分类</a>
			<ul class="category-list">
				<li class="dropdown" data-active="category" data-load="json/category-detail-1.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">家用电器</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<!--<div class="dropdown-loading"></div>-->
						<dl class="category-detail clearfixed">
							<dt class="category-detail-title fl"><a href="###" target="_blank" class="category-detail-title-link">手机通讯</a></dt>
							<dd class="category-detail-item fl">
								<a href="###" target="_blank" class="link">手机</a>
								<a href="###" target="_blank" class="link">对讲机</a>
								<a href="###" target="_blank" class="link">以旧换新</a>
								<a href="###" target="_blank" class="link">手机</a>
								<a href="###" target="_blank" class="link">对讲机</a>
								<a href="###" target="_blank" class="link">以旧换新</a>
								<a href="###" target="_blank" class="link">手机</a>
								<a href="###" target="_blank" class="link">对讲机</a>
								<a href="###" target="_blank" class="link">以旧换新</a>
								<a href="###" target="_blank" class="link">手机</a>
								<a href="###" target="_blank" class="link">对讲机</a>
								<a href="###" target="_blank" class="link">以旧换新</a>
							</dd>
							<!--……-->
						</dl>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-2.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">手机</a
						>、<a href="###" target="_blank" class="dropdown-link">运营商</a
						>、<a href="###" target="_blank" class="dropdown-link">数码</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-3.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">电脑</a
						>、<a href="###" target="_blank" class="dropdown-link">办公</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-4.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">家居</a
						>、<a href="###" target="_blank" class="dropdown-link">家具</a
						>、<a href="###" target="_blank" class="dropdown-link">家装</a
						>、<a href="###" target="_blank" class="dropdown-link">厨具</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-5.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">男装</a
						>、<a href="###" target="_blank" class="dropdown-link">女装</a
						>、<a href="###" target="_blank" class="dropdown-link">童装</a
						>、<a href="###" target="_blank" class="dropdown-link">内衣</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-6.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">化妆</a
						>、<a href="###" target="_blank" class="dropdown-link">清洁</a
						>、<a href="###" target="_blank" class="dropdown-link">宠物</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-7.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">运动户外</a
						>、<a href="###" target="_blank" class="dropdown-link">钟表</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-8.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">汽车</a
						>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-9.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">母婴</a
						>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-10.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">食品</a
						>、<a href="###" target="_blank" class="dropdown-link">酒类</a
						>、<a href="###" target="_blank" class="dropdown-link">生鲜</a
						>、<a href="###" target="_blank" class="dropdown-link">特产</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-11.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">医药保健</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-12.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">图书</a
						>、<a href="###" target="_blank" class="dropdown-link">音像</a
						>、<a href="###" target="_blank" class="dropdown-link">电子书</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-13.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">彩票</a
						>、<a href="###" target="_blank" class="dropdown-link">旅行</a
						>、<a href="###" target="_blank" class="dropdown-link">充值</a
						>、<a href="###" target="_blank" class="dropdown-link">票务</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
				<li class="dropdown" data-active="category" data-load="json/category-detail-14.json">
					<div class="dropdown-toggle">
						<a href="###" target="_blank" class="dropdown-link">理财</a
						>、<a href="###" target="_blank" class="dropdown-link">众筹</a
						>、<a href="###" target="_blank" class="dropdown-link">白条</a
						>、<a href="###" target="_blank" class="dropdown-link">保险</a>
						<i class="dropdown-arrow">&gt;</i>
					</div>
					<div class="dropdown-layer">
						<div class="dropdown-loading"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="fl lunbotu"></div>
		<div class="fr focus-sidebar"></div>
	</div>	
</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 src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*公共*/
*{margin: 0;padding: 0;}
.fl{float: left;}
.fr{float: right;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
.text-hidden{text-indent: -9999px;overflow: hidden;}
.text-ellipsis{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
a{text-decoration: none;}
li{list-style-type: none;vertical-align: top;}
/*下拉菜单公共样式*/
.dropdown{position: relative;}
.dropdown-toggle{position: relative;z-index: 2;}
.dropdown-arrow{display: inline-block;vertical-align: middle;line-height: 1em;}
.dropdown-layer{display: none;position: absolute;z-index: 1;overflow: hidden;/*后添加，防止添加下拉菜单动画后字还在*/}
.dropdown-left{left: 0;right: auto;}
.dropdown-right{right: 0;left: auto;}
/*字的公共样式*/
.link{color: #4d555d;}
.link:hover{color: #f01414 !important;}
/*1200px的盒子的公共样式*/
.container{width: 1200px;margin: 0 auto;}
/*下拉箭头公共样式*/
[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;
}
/*下拉菜单css3动画样式*/
.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;}
/*加载延迟*/
.dropdown-loading{width: 32px;height: 32px;background-image: url("../img/loading.gif");
	background-repeat: no-repeat;margin: 20px;}

// JavaScript Document
//menu
$('.menu').on('dropdown-show',function(event){
	loadOnce($(this),buildMenuItem);
});
function buildMenuItem($elem,data){
	var html="";
	if(data.length===0)return;
	setTimeout(function(){//模拟服务器延迟
		for(var i=0;i<data.length;i++){
			html+='<li><a href="'+data[i].url+'" class="menu-item link">'+data[i].name+'</a></li>'
		}
		$elem.find('.dropdown-layer').html(html);
	},800);
}
$('.menu').dropdown({
	css3:true,
	js:false,
	animation:'fade',
	delay:200
});
//category
$('.category').find(".dropdown")
	.on("dropdown-show",function(){
		loadOnce($(this),createCategoryDetails);
	})
	.dropdown({
		css3:false,
		js:true,
		animation:'fadeSlideLeftRight'
	});
function createCategoryDetails($elem,data){
	var html='';
	for (var i = 0; i < data.length; i++) {
		html += '<dl class="category-details clearfixed"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';
		for (var j = 0; j < data[i].items.length; j++) {
			html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
		}
		html += '</dd></dl>';
	}
	setTimeout(function () {
		$elem.find('.dropdown-layer').html(html);
	},1000);
	
}

function loadOnce($elem,success){
	var dataLoad=$elem.data('load');
	if(!dataLoad)return;
	if(!$elem.data('loaded')){
		$elem.data('loaded',true);
		$.getJSON(dataLoad)
		.done(function(data){
			if(typeof success==='function')success($elem,data);
		}).fail(function(){
			$elem.data('loaded',false);
		});
	   }
}

//header search
var $headerSearch=$("#header-search");
var html="",
	maxlength=5;
$headerSearch.on("search-getData",function(e,data){
	var $this=$(this);
	html=createHeaderSearchLayer(data,maxlength);
	$this.search("appendLayer",html);//修改
	//$layer.html(html);//修改
	if(html){
	   $this.search("showLayer");
	   }else{
	   $this.search("hideLayer");
	   }
}).on("search-noData",function(e){
	$(this).search("hideLayer").search("appendLayer","");//修改
	//$layer.html("");//修改
}).on("click",".search-layer-item",function(){
	$headerSearch.search("setInputVal",$(this).html());
	$headerSearch.search("submit");
});
$headerSearch.search({
	autocomplete:true,
	css3:false,
	js:false,
	animation:"fade"
});
function createHeaderSearchLayer(data,maxlength){
	var dataNum=data["result"].length;
	var html="";
	if(dataNum===0){
		//$layer.hide().html("");具体的事情外面解决
		return;
	   }
	for(var i=0;i<dataNum;i++){
		if(i>maxlength)break;
		html+='<li class="search-layer-item text-ellipsis">'+data["result"][i][0]+'</li>';
	}
	return html;
}

迷失的小麦 2020-02-12

源自：实战：中心focus区域组件化 1-5 按需加载商品详情