请教购物车下拉菜单的问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 购物车 -->
<div class="cart dropdown fl" data-active="cart" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">
<i class="cart-car icon margin"></i>
<span class="cart-word margin">购物车</span>
<span class="cart-vline margin">|</span>
<span class="cart-count margin">20</span>
<i class="dropdown-arrow icon transition"></i>
</a>
<!-- 要完美还原 要重新设计html结构，外层再用一个div -->
<ul class="dropdown-layer dropdown-commodity">
<!-- <li>
<div class="dropdown-none cf">
<div class="dropdown-none-1 fl">img</div>
<div class="dropdown-none-2 fl"> 购物车里还没有商品，赶紧去选购吧！</div>
</div>
</li> -->
<li class="dropdown-loading"></li>
<!-- <li class="title cart-item">最近加入的商品</li>
<li>
<a href="###" target="_blank" class="cart-item">
<div class="cart-item-cotent cf">
<div class="cart-item-cotent-img fl">
<img src="img/cart/1.png">
</div>
<div class="cart-item-cotent-word fl">
<p class="cart-item-cotent-intro linht">adidas 阿迪达斯</p>
<p class="cart-item-cotent-price linht">￥335*1</p>
</div>
<i class="dropdown-arrow icon fl cart-item-cotent-icon linht">

</i>
</div>
</a>
</li>
<li class="cart-item-last">
<span class="total">共<b>0</b>件商品 共计<b>￥ 0.00</b></span>
<a href="###" class="gocart">去购物车</a>
</li> -->
</ul>
</div>
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/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/index.js"></script>
</body>
</html>/*下拉菜单样式dropdown*/
.cart{
background-color: #f01414;
width: 180px;
height: 50px;
top: 100px;
left: 50%;
margin-left: -90px;
line-height: 50px;
font-size: 16px;
}
.cart a{
color: #f3f5f7;
}
.margin{
margin: 5px;
}
.cart-car{
width: 20px;
height: 18px;
}
.cart-count{
margin-right: 0;
}
/*.cart .dropdown*/
.cart .dropdown-toggle {
display: block;
height: 100%;
padding: 0 13px 0 12px;
}
.cart-item {
display: block;
height: 80px;
color: #4d555d!important;
margin: 0 12px;
border-bottom: 1px solid #cdd0d4;
}
/* -active样式 */
.cart-active,
.cart-active .dropdown-layer{
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
/* 购物车 */
.cart-active .dropdown-toggle {
background-color: #fff;
}
.dropdown-layer{
display: none;
width: 400px;
top: 49px;
left: -222px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
/* 模拟加载 */
.dropdown-loading{
margin: 34px auto;
}
/* 无商品 */
.dropdown-none{
width: 200px;
margin: 34px auto;
}
.dropdown-none-1{
width: 50px;
height: 50px;
}
.dropdown-none-2{
line-height: 20px;
width: 150px;
color: #cdd0d4;
}
/* 有商品 */
.cart-active .dropdown-commodity{
width: 400px;
border-bottom: 1px solid #cdd0d4;
overflow: auto;
}
.cart-active .dropdown-commodity li:last-child .cart-item{
border-bottom:none;
}
.cart-item-cotent{
padding: 15px 10px;
position: relative;
}
.cart-item-cotent-word{
margin-left: 20px;
}
.linht{
height: 25px;
line-height: 25px;
}
.cart-item-cotent-price{
font-weight: bold;
}
.cart-item-cotent-icon{
position: absolute;
right: 0;
}
.title{
height: 50px;
text-indent: 18px;
font-weight: bold;
}
.total{
line-height: 80px;
margin-left: 30px;
}
.cart-item-last{
position: relative;
}
.gocart{
display: inline-block;
width: 100px;
height: 50px;
position: absolute;
top: 50%;
right: 12px;
margin-top: -25px;
background-color: #f01414;
color: #fff;
border-radius: 5px;
text-align: center;
}(function ($) {
$(".dropdown").dropdown({
css3: true,
js: false
});
// 从本地数据库获取json数据
$('.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'),
html = '';
$.getJSON(dataLoad, function (data) {
console.log(data);
var len = data.length - 1;
if(len < 0){
html = '<li><div class="dropdown-none cf"><div class="dropdown-none-1 fl">img</div><div class="dropdown-none-2 fl"> 购物车里还没有商品，赶紧去选购吧！</div></div></li>';
$layer.html(html);
$this.data('loaded', false);
}else{
// html = '<li class="dropdown-loading"></li>';
setTimeout(function () {
html = '<li class="title cart-item">' + data[0].title + '</li>';
for (var i = 1; i < len; i++) {
// html += '<li><a href="' + data[i].url + '" target="_blank" class="cart-item">' + data[i].name + '</a></li>'
html +='<li><a href="' + data[i].url + '" target="_blank" class="cart-item"><div class="cart-item-cotent cf"><div class="cart-item-cotent-img fl"><img src="' + data[i].img + '"></div><div class="cart-item-cotent-word fl"><p class="cart-item-cotent-intro linht">' + data[i].intro + '</p><p class="cart-item-cotent-price linht">' + data[i].price + '</p></div><i class="dropdown-arrow icon fl cart-item-cotent-icon linht"> ' + data[i].icon + '</i></div></a></li>'
}
html = html + '<li class="cart-item-last"><span class="total">' + data[len].total + '<b>' + data[len].price + '</b></span> <a href="###" class="gocart">' + data[len].cart + '</a></li>';
$layer.html(html);
$this.data('loaded', true);
}, 3000);
}
});
}
});
})(jQuery);[
{
"title": "最近加入商品"
},
{
"url": "###",
"img": "img/cart/1.png",
"intro": "adidas 阿迪达斯111",
"price": "￥335*1",
"icon": ""
},
{
"url": "###",
"img": "img/cart/2.png",
"intro": "adidas 阿迪达斯2222",
"price": "￥335*2",
"icon": ""
},
{
"url": "###",
"img": "img/cart/3.png",
"intro": "adidas 阿迪达斯3333333",
"price": "￥335*3",
"icon": ""
},
{
"url": "###",
"img": "img/cart/4.png",
"intro": "adidas 阿迪达斯44444",
"price": "￥335*4",
"icon": ""
},
{
"url": "###",
"img": "img/cart/5.png",
"intro": "adidas 阿迪达斯5555555",
"price": "￥335*5",
"icon": ""
},
{
"total": "共0件商品 共计 ",
"price": "￥ 0.00",
"cart": "去购物车"
}
]
1、请老师帮我优化一下代码，谢谢。
2、本地服务器怎么设置啊，有教程吗？
3、那个<li class="dropdown-loading"></li>， dropdown-loading是在js中哪里加载的，我找不到。
14
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星