老师，我写的是这个思路么？为什么显示不出来呢？？麻烦老师看一下。
来源：3-5 自由编程
小仙女要好好学习
2019-09-18 19:11:07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/base.css"> </head> <body> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="###" target="_blank" class="nav-site-login">亲，请登录</a></li> <li class="fl"><a href="###" target="_blank" class="nav-site-signup link">免费注册</a></li> <!--link统一鼠标滑过变红的样式--> <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">我的慕淘<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdoen-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">收藏夹<i class="dropdown-arrow"></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">商品分类</a></li> <!--第四个下拉菜单，卖家中心--> <li class="menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link">卖家中心<i class="dropdown-arrow"></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> <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> </li> <!--第五个下拉菜单--> <li class="nav-site-service menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow"></i></a> <ul class="dropdown-layer dropdoen-right"> <li><a href="###" target="_blank" class="dropdown-item">消费者客服</a></li> <li><a href="###" target="_blank" class="dropdown-item">卖家客服</a></li> </ul> </li> </ul> </div> </div> <!--header--> <div class="header"> <div class="container"> <h1><a href="index.html" class="header-logo fl textIndent">慕课网</a></h1> <div class="search fl"> <form action="https://s.taobao.com/search" class="search-form"> <input type="text" name="q" class="search-inputbox fl" placeholder="灵魂美食一元抢" autocomplete="off"> <input type="submit" value="搜索" class="search-btn fl"> </form> <ul class="search-layer"> <!-- <li class="search-layer-item">111</li> <li class="search-layer-item">111</li> <li class="search-layer-item">111</li> --> </ul> </div> <div class="cart fr" > <div class="cart-wrap">购物车 | 18</div> <div class="cart-layer"> <div class="cart-layer-one" > <div class="cart-loading"></div> <!-- <div class="cart-new">最新加入的商品</div> <div class="cart-item">adidas 阿迪达斯 训练 男子 X <br><br>￥355X1</div> <div class="cart-item">玉兰油多效修护三部曲套装 X <br><br>￥199X2</div> <div class="cart-item">adidas</div> <div class="cart-item">adidas</div> <div class="cart-item">玉兰油多效修护三部曲套装 X <br><br>￥199X2</div> <div class="cart-item">玉兰油多效修护三部曲套装 X <br><br>￥199X2</div> --> </div> <div class="cart-all">共 0 件商品 共计￥0.00 <span>去购物车</span></div> </div> </div> </div> </div> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/index.js"></script> <script src="js/dropdown.js"></script> <script src="js/search.js"></script> <script src="js/cart.js"></script> </body> </html>
.nav-site{
width: 100%;
background: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.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;
width: 8px;
height: 6px;
background: url(../img/dropdown-arrow.png) no-repeat;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
top:42px;
background-color: #fff;
z-index: 1;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-item{
display: block;
line-height: 30px;
height: 30px;
color: #4d555d;
white-space: nowrap; /*文字不换行*/
padding:0 12px;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}
.dropdown-active .dropdown-toggle{
border-color: #cdd0d4;
background: #fff;
}
.dropdown-active .dropdown-arrow{
background-image: url(img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer{
display: block;
}
/*header*/
.header{
width: 100%;
height: 100px;
background-color: #f3f5f7;
}
.header .header-logo,.header .search,.header .cart{
margin-top: 36px;
}
.header-logo{
display: inline-block;
width: 136px;
height: 48px;
background:url(../img/header-logo.png);
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}
/*cart*/
.cart{
position: relative;
}
.cart-wrap{
width: 100px;
height: 40px;
line-height: 40px;
background: #f01414;
margin-right: 10px;
color: #fff;
font-size: 12px;
text-align: center;
padding-left: 20px;
background: #f01414 url(../img/cart.png) no-repeat 8px ;
background-size: 20px 20px;
cursor: pointer;
}
.cart-layer{
height: 370px;
background: #f01414;
width: 290px;
background: #fff;
position: absolute;
right: 10px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
display: none;
}
.cart-layer-one{
height: 300px;
border: 1px solid #f3f5f7;
overflow-x: auto;
padding:10px 20px;
}
.cart-new{
font-size: 14px;
font-weight: bold;
height: 30px;
line-height: 30px;
padding-left: 8px;
}
.cart-item{
height: 50px;
padding-left: 8px;
border-bottom: 1px solid #dddfe0;
padding-left: 55px;
background: url(../img/1.png) no-repeat;
padding-top: 10px;
}
.cart-layer .cart-item:nth-child(2){
border-top: 1px solid #dddfe0;
}
.cart-layer .cart-item:nth-child(3){
background: url(../img/2.png) no-repeat;
}
.cart-all{
height: 70px;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
}
.cart-all span{
background: #f01414;
color: #fff;
width: 70px;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
right: 20px;
bottom: 10px;
cursor: pointer;
}
.cart-loading{
width: 32px;
height: 32px;
background:url(../img/loading.gif) no-repeat;
margin:20px;
}$(".cart").hover(function(){
var $cart=$(this);
var layer=$(".cart-layer");
$cart.find(".cart-wrap").css({
color:"red",
background:" #fff url(img/cart-active.png) no-repeat 8px",
});
layer.show();
},function(){
var $cart=$(this);
var layer=$(".cart-layer");
$cart.find(".cart-wrap").css({
color:"#fff",
background:" red url(img/cart.png) no-repeat 8px",
});
layer.hide();
});
$(".cart").on("mouseenter",function(){
var $this=$(this);
if(!$this.data("loaded")){
var $cartlayer=$(this).find(".cart-layer-one"),
html='';
$.getJSON("dropdown.json",function(data){
if(data.length==0){
html="购物车里还没有商品，赶紧去选购吧"
$cartlayer.html(html);
}else{
setTimeout(function(){
for(var i=0;i<data.length;i++){
html+='<div class="cart-item">'+data[i].name+'</div>'
}
$cartlayer.html(html);
$this.data("loaded",true);
},1000)
}
})
}
})[
{
"url":"###",
"name":"adidas 阿迪达斯 训练 男子 X <br><br>￥355X1"
},
{
"url":"###",
"name":"玉兰油多效修护三部曲套装 X <br><br>￥199X2"
},
{
"url":"###",
"name":"adidas"
},
{
"url":"###",
"name":"adidas"
},
{
"url":"###",
"name":"玉兰油多效修护三部曲套装 X <br><br>￥199X2"
},
{
"url":"###",
"name":"a玉兰油多效修护三部曲套装 X <br><br>￥199X2"
}
]
写回答
1回答
-
好帮手慕夭夭
2019-09-19
你好同学，思路是对的，老师使用你的代码测试，下拉菜单可以显示的如下：
加载中的
数据加载过来也显示了：
同学是不是没有放在服务器中测试呢？因为本地不能直接ajax发出请求的，需要配置服务器环境。在前面的课程中有相关资料，可以安装一下。
地址：https://class.imooc.com/course/800
祝学习愉快，望采纳。
0
