老师，为什么我的dropdown-layer下的CSS没有生效

老师，为什么我的dropdown-layer下的CSS没有生效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
<style>
</style>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl">
<a href="javascript:;" id="nav-site-signin" class="nav-site-login"
>亲，请登录</a
>
</li>
<li class="fl">
<a
href="javascript:;"
id="nav-site-signup"
class="nav-site-signup link"
>免费注册</a
>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-mobile link"
>手机逛慕淘</a
>
</li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a
href="###"
target="_blank"
class="dropdown-toggle link transition"
>我的慕淘<i class="dropdown-arrow icon transition">&#xe624;</i></a
>
<ul class="dropdown-layer dropdown-left">
<li>
<a href="###" target="_blank" class="menu-item">已买到的宝贝</a>
</li>
<li>
<a href="###" target="_blank" class="menu-item">我的足迹</a>
</li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a
href="###"
target="_blank"
class="dropdown-toggle link transition"
>收藏夹<i class="dropdown-arrow icon transition">&#xe624;</i></a
>
<ul class="dropdown-layer dropdown-left">
<li>
<a href="###" target="_blank" class="menu-item">收藏的宝贝</a>
</li>
<li>
<a href="###" target="_blank" class="menu-item">收藏的店铺</a>
</li>
</ul>
</li>
<li class="fl">
<a
href="###"
target="_blank"
class="nav-site-category link transition"
>商品分类</a
>
</li>

<li
class="menu dropdown fl"
data-active="menu"
data-load="js/dropdown-seller.json"
>
<a
href="###"
target="_blank"
class="dropdown-toggle link transition"
>卖家中心<i class="dropdown-arrow icon transition">&#xe624;</i></a
>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
</ul>
</li>
<li class="nav-site-service menu dropdown fl" data-active="menu">
<a
href="###"
target="_blank"
class="dropdown-toggle link transition"
>联系客服<i class="dropdown-arrow icon transition">&#xe624;</i></a
>
<ul class="dropdown-layer dropdown-right">
<li>
<a href="###" target="_blank" class="menu-item">消费者客服</a>
</li>
<li>
<a href="###" target="_blank" class="menu-item">卖家客服</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 站点导航结束 -->
<div class="header">
<div class="container">
<h1 class="fl">
<a href="./index.html" class="header-logo text-hiddne">慕课网</a>
</h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<!-- //要有name才能把内容提交出去 -->
<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">
</ul>
</div>
<div id="cart" class="cart dropdown fr" data-active='cart' data-load='js/cart.json'>
<a href="###" target="_blank" class="dropdown-toggle transition">
<i class="icon cart-logo">&#xe641;</i
><span class="cart-text">购物车</span
><span class="cart-vline text-hidden"></span
><span class="cart-num">0</span
><i class="icon dropdown-arrow transition">&#xe624;</i>
</a>
<div class="dropdown-layer dropdown-right">
<div class="dropdown-loading">
</div>
</div>
</div>
</div>
</div> 
</div>
</div>
<!-- 主导航 -->
<div class="nav-main">
<div class="container">
<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>
</div>
</div>
<div class="focus">
<div class="container">
<div id="focus-category" 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='js/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>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="js/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="slider fl"></div>
<div class="focus-sidebar fr"> </div>
</div>
</div>  

<script>
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</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>

common.css文件

/*公共样式*/
.container {
/*站点导航*/
width: 1200px;
margin: 0 auto;
}

a.link {
/*链接正常颜色*/
color: #4d555d;
}

a.link:hover {
/*链接经过颜色*/
color: #f01414 !important;
}

.dropdown {
position: relative;
}

.dropdown-toggle {
position: relative;
z-index: 2;
}

.dropdown-arrow {
display: inline-block;
line-height: 1;
/*background-repeat: no-repeat;*/
vertical-align: middle;
}

.dropdown-layer {
display: none;
position: absolute;
z-index: 1;
}

.dropdown-left {
left: 0;
right: auto;
}

.dropdown-right {
right: 0;
left: auto;
}
.text-ellipsis{
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
}

/*showHide*/
.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:url(../img/loading.gif) no-repeat;
margin: 20px;
}
/*icon*/
@font-face {
font-family: "iconfont";
src: url('../test/font/iconfont.eot?t=1477124206');
/* IE9*/
src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
/* iOS 4.1- */
}

.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

.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;
}
.menu-active .dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*.menu .dropdown*/

.menu .dropdown-toggle {
display: block;
height: 100%;
padding: 0 13px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}

.menu .dropdown-arrow {
/*width: 8px;
    height: 6px;
    background-image: url(../img/dropdown-arrow.png);*/
margin-left: 5px;
}

.menu .dropdown-layer {
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.cart-layer{
font-size: 14px;
border:none;
width: 200px;
color: #a4a4a4;
background-color:white;
box-shadow: 1px 1px 5px 1px #eee;
}
/* .dropdown-layer-cart .icon{
    font-size: 40px !important;
} */
.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;
}

.text-hiddne{
    text-indent: -9999px;
    overflow: hidden;
}

/* 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;
border: none;
font-size: 14px;
color: #fff;
text-align: center;
cursor: pointer;
}
.search-layer{
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item{
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;

}
.search-layer-item:hover{
background-color: #f3f5f7;
}
/*购物车*/
/*购物车*/
.cart {
width: 160px;
}
.cart .dropdown-toggle {
display: block;
height: 42px;
line-height: 42px;
background-color: #f01414;
color: #fff;
font-size: 14px;
padding: 0px;
}
.cart-vline{
display: inline-block;
width: 1px;
height: 16px;
background-color: #fff;
}
.cart-logo,
.cart-text,
.cart-vline,
.cart-num{
margin-left:14px;
vertical-align:middle;
}
.cart .dropdown-arrow{
position: absolute;
top: 15px;
right: 10px;
}
.cart .dropdown-layer{
top: 100%;
width: 320px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.2);
overflow: hidden;
}
.cart-nogoods{
height: 120px;
}
.cart-nogoods-icon{
margin: 36px 0 0 80px;
color: #d9dde1;
font-size:40px;
}
.cart-nogoods-text{
margin: 37px 0 0 15px;
color: #93999f;
line-height: 20px;
}
.cart-title{
height: 52px;
line-height: 52px;
color: #07111b;
font-size: 14px;
text-indent: 24px;
}
.cart-list{
overflow: auto;
max-height: 326px;
padding: 0 12px;
}
.cart-item{
height: 64px;
border-top: 1px solid #d9dde1;
}
.cart-item:hover {
background-color: #f3f5f7;
}
.cart-item-pic {
margin: 8px 0 0 12px;
}
.cart-item-name {
width: 172px;
margin: 16px 0 0 12px;
}
.cart-item-price{
margin: 10px 0 0 12px;
color: #4d555d;
}
.cart-item-delete{
margin: 17px 13px 0 0;
}
.cart-info{
height: 68px;
line-height: 68px;
padding: 0 28px 0 24px;
color: #07111b;
}
.cart-info-btn{
width: 80px;
height: 36px;
line-height: 36px;
background-color: #f01414;
border-radius: 2px;
margin-top: 16px;
color: #fff;
font-weight: bold;
text-align: center;
}
.cart-info-btn:hover {
background-color: red;
}

/*category*/
.category{
position: relative;
width: 208px;
margin-top: -62px;
font-size: 14px;
}
.category .dropdown{
position: static;/*取消相对点*/
}
.category-title{
display: block;
height: 54px;
line-height: 54px;
padding: 0 20px;
background-color: #c81414;
color: #fff;
}
.category-title .icon{
margin-right: 10px;
font-size: 16px;
}
.category-list{
height: 512px;
background-color: #f01414;
}
.category .dropdown-toggle{
height: 36px;
line-height: 36px;
padding-left:16px;
color: white;

}
.category .dropdown-link{
color: #fff;
}
.category .dropdown-arrow{
position: absolute;
top:12px;
right: 12px;
font-family:simsun;
font-weight:bold;
}
.category-active .dropdown-toggle{
background-color: #fff;
}
.category-active .dropdown-toggle,
.category-active .dropdown-link{
color: #f01414;
}
.category .dropdown-layer{
display: none;
top: 54px;
left: 100%;
width: 744px;
min-height: 473px;
padding: 8px 0 31px 0;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.category .dropdown-layer .category-details{
width: 744px;
margin-top: 24px;
line-height: 20px;
}
.category .dropdown-layer .category-detail-title{
width: 84px;
padding-right: 16px;
border-right: 1px solid #d9dde1;
text-align: right;
}
.category .dropdown-layer .category-detail-title-link{
color: #07111b;
font-weight: bold;
}
.category .dropdown-layer .category-detail-item{
width: 592px;
padding-left: 15px;
}
.category .dropdown-layer .category-detail-item .link{
display: inline-block;
margin-right: 16px;
}
.category .dropdown-layer .category .dropdown-loading{
margin:220px auto 0;
}

index.css文件

/*nav-site*/
.nav-site {
/*站点导航整体设置*/
width: 100%;
background-color: #f3f5f7;
}
.nav-site .container {
/*站点导航内容块整体设置*/
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login {
/*站点导航“亲，请登陆”设置*/
margin-left: 15px;
color: #f01414;
}
.nav-site-signup,
.nav-site-mobile {
/*站点导航“注册和手机购买”设置*/
margin-left: 10px;
}
.nav-site-category {
margin: 0 10px;
}
.nav-site-service {
margin-right: 15px;
}
/*下拉菜单样式dropdown*/
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}

.dropdown-arrow {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer {
display: none;
position: absolute;
top: 43px;
background-color: red;
z-index: 1;
border: 1px solid #cdd0d4;
}

/* header */
.header {
width: 100%;
height: 124px;
background-color: #f3f5f7;
position: relative;
}
.header-logo,
.header .search,
.header .cart {
margin-top: 36px;
}
.header-logo {
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin-left: 15px;
}
.header .search {
margin-left: 145px;
}

/*nav-main*/
.nav-main {
width: 100%;
height: 48px;
background-color: #07111b;
margin-bottom: 8px;
text-indent: 182px;
}
.nav-main .link {
margin-left: 50px;
color: #fff;
font-size: 14px;
line-height: 48px;
}
/*focus*/
.focus{
width: 100%;
height: 504px;
background-color: #eee;
margin-bottom:8px;
}
/*category*/
.category{
width: 208px;
margin-top:-62px;
font-size: 14px;
}
.category-title{
display: block;
height: 54px;
line-height: 54px;
padding: 0 20px;
background-color:#c81414;
}
.category .icon{
margin-right: 10px;
}

index.js

(function($) {
"use strict";
//menu
// $(".dropdown").on("dropdown-show", function(e) {
//   var $this = $(this),
//     dataLoad = $this.data("load");
//   // console.log($this.data('load')
//   if (!dataLoad) return;
//   if (!$this.data("loaded")) {
//     //只执行一次，第一次肯定是undefined
//     var $layer = $(this).find(".dropdown-layer"),
//       html = "";
//     $.getJSON(dataLoad, function(data) {
//       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);
//     });
//   }
// });
// $(".dropdown").dropdown({
//   css3: true,
//   js: false
// });

$('.menu').on('dropdown-show', function(e) {
loadOnce($(this), buildMenuItem);
});
$('#cart').on('dropdown-show', function() {
loadOnce($(this), function($elem, data) {
buildCartItem($elem, data);
updateCart($elem, data);
});
})
$(".menu").dropdown({
css3:true,
js:false
});
$('#cart').dropdown({
css3:true,
js:false
})


//header search
var $headerSearch = $("#header-search");
var html="",
maxNum=10;//因为频繁触发，把不必要的频繁触发写在外面
$headerSearch.on("search-getData", function(e, data) {
var $this=$(this);
html=createHeaderSearchLayer(data,maxNum)
$this.search('appendLayer',html);

if(html){
$this.search('showLayer');
}else{
$this.search('hideLayer');
}

}).on("search-noData", function(e) {
$(this).search('hideLayer').search('appendLayer','');
}).on('click','.search-layer-item',function(){//事件代理，冒泡机制
$headerSearch.search('setInputVal',$(this).html());
$headerSearch.search('submit');
});;

var $headerSearch = $("#header-search");
$headerSearch.search({
autocomplete: true,
css3: true,
js: false,
animation: "fade",
getDataInterval:200
});
function createHeaderSearchLayer(data,maxNum){//创建结构
var html='',
dataNum=data['result'].length;

if (dataNum === 0) {
return '';
}
for (var i = 0; i < maxNum; i++) {
if (i >= maxNum) break;
html +='<li class="search-layer-item text-ellipsis">' +data["result"][i][0] +"</li>";
}
return html;
}
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('load',false);//如果设置成false,就以为着下一次还能再执行一遍
});
}
}

function buildMenuItem($elem,data){
var html="";
if(data.length===0) return;
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>'
}
$elem.find('.dropdown-layer').html(html);
}

function buildCartItem($elem,data){
var html = "",
totalNum=0,
totalPrice=0;
if(data.length===0){
html +='<div class="cart-nogoods"><i class="icon cart-nogoods-icon fl">&#xe509;</i><div class="cart-nogoods-text fl">购物车里还没有商品<br/>赶紧去选购吧！</div></div>';
$elem.find('.dropdown-layer').html(html);
return;
}
html += '<h4 class="cart-title">最新加入的商品</h4><ul class="cart-list">';
for(var i=0;i<data.length;i++){
totalNum+=+data[i].num;
totalPrice +=+parseInt(data[i].num)*+parseInt(data[i].price);
html+='<li class="cart-item"><a href="###" target="_blank" class="cart-item-pic fl"><img src="'+data[i].pic+'" alt="" /></a><div class="fl">  <p class="cart-item-name text-ellipsis"><a href="###" target="_blank" class="link">'+data[i].name+'</a></p><p class="cart-item-price"><strong>'+data[i].price+' x '+ data[i].num + '</strong></p></div><a href="javascript:;" title="删除" class="cart-item-delete link fr">X</a></li>'
}
html+='</ul><div class="cart-info"><span class="fl">共'+totalNum+'<strong class="cart-total-num"></strong> 件商品,共计<strong class="cart-total-price">￥'+totalPrice+'</strong></span><a href="###" target="_blank" class="cart-info-btn btn fr">去购物车</a></div>';
setTimeout(function(){
$elem.find('.dropdown-layer').html(html);
},1000);
}
function updateCart($elem,data){
var $cartNum = $elem.find('.cart-num'),
$cartTotalNum = $elem.find('.cart-total-num'),
$cartTotalPrice =$elem.find('.cart-total.price'),
dataNum=data.length,
totalNum=0,
totalPrice=0;

if(dataNum ===0){//no goods
return;
}
for(var i=0;i<data.length;i++){
totalNum+=+data[i].num;
totalPrice += + data[i].num * +data[i].price;
}
$cartNum.html(totalNum);
$cartTotalNum.html(totalNum);
$cartTotalPrice.html('￥'+totalPrice);
}


//category
$('#focus-category').find('.dropdown')
.on('dropdown-show',function(){
loadOnce($(this),createCategoryDetails);
})
.dropdown({
css3:false,
js:false
});
function createCategoryDetails($elem,data){
var html='';
for(var i=0;i<data.length;i++){
html +='<dl class="category-details cf"><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>';
}
$elem.find('.dropdown-layer').html(html);
}
})(jQuery);

http://img1.sycdn.imooc.com//climg/5d1a36a50001bfae10510555.jpg效果是这样的
宗桦 2019-07-02
源自： 实战：电商网站中心focus区域   1-5 按需加载商品详情
1
收起

正在回答

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

2回答
好帮手慕慕子 回答被采纳获得+3积分 2019-07-02 10:01:52

同学你好，1、 老师这边测试你的代码， 如下图所示，dropdown-layer类名下设置的边框阴影是生效了的

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

右侧文字的效果和老师不一样， 是因为同学这里只给dropdown-layer设置了样式， 如下图圈起来的部分，没有文字设置样式，所以导致效果不一样http://img1.sycdn.imooc.com//climg/5d1ab98e0001c5a408130369.jpg

2、 可以这样理解， 在json文件加载完成后， $elem.find('.dropdown-layer').html(html);这句代码会替换dropdown-layer下的HTML内容， 所以GIF图会被替换成文字内容，不再显示了

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~



0
收起回答
  • 宗桦 提问者 #1
    没有设置样式我发现是我自己调用CSS少些了s，解决了，谢谢老师
    2019-07-02 16:25:33
提问者 宗桦 2019-07-02 00:41:13

还有我想知道为什么获取了JSon文件里的数据，那个加载的GIF就没显示，被隐藏了，是哪个步骤有写到这一步，是不是被index.js最后一行代码的

$elem.find('.dropdown-layer').html(html);

给覆盖掉了

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师有问题
19 0 5
老师帮忙看一下这里设置background-color为什么能去除分割线
13 0 3
老师帮我看代码哪里有问题为什么菜单不能下拉l路径没有错但是js代码好像不起作用一样
16 0 3
老师，为什么js代码没有作用
17 0 5
老师，我的css怎么不生效呢
25 0 7

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

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

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

了解课程

本课精华内容

问答 作业

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

0 2

所谓的异步请老师解释

1 20

请问老师关于这个疑问

0 20

老师安装问题

0 16

请问老师为什么不会执行

0 16

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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