老师问下怎么去除toggle以及下拉层中间的阴影，我试了一些办法好像都不行

来源：3-5 自由编程

vivi_li

2020-05-28 13:13:57

我写在一起了其余文件老师可以用课上那些，另外还有个问题

我如果设置cart 的maigin-top值的话，底部的下拉层会与上方toggle部分重叠，是什么原因呢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车组件</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/common.css">

<style>
.container{
margin-bottom: 30px;
}
.cart>a{
display: block;
color: #fff;
width: 158px;
background-color: #f01414;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
border: 1px solid #f01414;
}
.cart:hover>a{
color: #f01414;
background-color: #fff;
border-color: #e9e9e9;
border-bottom: none;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);
}
.cart-line{
margin: 0 15px 0 13px;
}
i.dropdown-cart{
margin-right: 14px;
}
.cart i:nth-child(2){
margin-left: 14px;
}
.cart .dropdown-layer{
/*display: block;*/
padding: 0 30px 0 12px;
font-size: 14px;
border: 1px solid #d9dde1;
min-width: 278px;
top: 40px;
box-shadow: 0 0 3px rgba(0, 0, 0,.1);

}
.cart-bd{
height: 52px;
line-height: 52px;
color: #000;
border-bottom: 1px solid #d9dde1;
text-indent: 12px;
}
.cart .dropdown-layer .cart-item{
height: 44px;
padding: 10px;
border-bottom: 1px solid #d9dde1;
}

.cart-item .cart-detail{
max-width: 145px;
margin-left: 15px;
}
.cart-item .cart-detail-title{
width: 145px;
color: #4d555d;
margin-top: 6px;
font-size: 12px;
}
.word-nowrap{
overflow: hidden;
white-space: nowrap;
}
.cart-item .cart-delete{
margin-top: 5px;
}
.cart-detail-price{
margin-top: 10px;
color: #4d555d;
font-weight: 700;
}
.cart-ft{
padding-left: 12px;
height: 68px;
line-height: 68px;
color: #000;
}
.cart-ft-price::before{
content: " ￥";
display: inline-block;
}
.cart-ft-linkCart{
display: inline-block;
width: 80px;
height: 35px;
border-radius: 3px;
background-color: #f01410;
line-height: 35px;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="cart fr dropdown" data-active="cart" data-load="cart.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">
<i class="dropdown-cart icon"></i>
购物车
<span class="cart-line">|</span>
<span class="cart-count-total">0</span>
<i class="dropdown-arrow icon"></i>
</a>
<div class="dropdown-layer dropdown-right">
<div class="dropdown-loading"></div>































</div>
</div>
</div>
</body>

<script>
window.jQuery || document.write('<script src="../plug/jQ/jQuery3.5.1.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>
//menu
//四舍五入保留2位小数（不够位数，则用0替补）
function keepTwoDecimalFull(num) {
var result = parseFloat(num);
if (isNaN(result)) {
alert('传递参数错误，请检查！');
return false;
}
result = Math.round(num * 100) / 100;
var s_x = result.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}
$(".cart").on("dropdown-show",function (e) {
var $this = $(this),
$cartCountTotal=$this.find(".cart-count-total")
dataLoad = $this.data("load");

console.log(dataLoad)
if (!dataLoad) return;
if(!$this.data("loaded")){
var $layer = $this.find(".dropdown-layer"),
total = 0,
html = "";

//确保异步请求只调用一次，以免重复渲染页面
$.getJSON(dataLoad,function (data) {
// console.log(data)
setTimeout(function () {
var dataLength = data.length
for (var i = 0;i<dataLength;i++){
total+=data[i]['count']*data[i]['price'];

html += '<li class="cart-item">'+
'<div class="cart-img fl">' +
'<a href="###" target="_blank">' +
'<img src="'+data[i].url+'" alt="'+data[i].detail+'">' +
'</a>'+
'</div>'+
'<div class="cart-detail fl">'+
'<div class="cart-detail-title word-nowrap fl">'+data[i].detail+'</div>'+
'<div class="cart-detail-price fl">￥'+
'<strong class="price">'+data[i]['price']+'</strong> x'+
'<strong class="cart-detail-count">'+data[i]['count']+'</strong>'+
'</div>'+
'</div>'+
'<div class="cart-delete fr">'+'<i class="icon">'+''+'</i></div>'+
'</li>'
}
total=keepTwoDecimalFull(total);
$layer.html('<div class="cart-bd">'+'<strong>'+'最新加入的宝贝'+'</strong></div>'+
'<ul class="cart-content">'+html+'</ul>'+ '<div class="cart-ft ">'+ '共 <strong>'+dataLength+'</strong>'+ '件商品'+ '  共计<strong class="cart-ft-price">'+total+'</strong>'+ ' <a href="###"' +'class="cart-ft-linkCart fr">'+'去购物车'+'</a>'+ ' </div>');
//加载完成标记
$this.data("loaded",true);
$cartCountTotal.text(dataLength)
},1000)
})
}
})
$(".dropdown").dropdown({
css3:true,
js:false,
delay:0,
})

</script>
</html>