按照国际惯例先放效果图
安静的时候它长这样
等待加载时它长这样（功能是设置的按需加载，网速慢或者加载数据大时会出现）
加载之后购物车没有商品时这样
有商品长这样
接下来放代码：
cart.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cart</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/cart.css"> </head> <body> <div class="cart dropdown" data-active="cart" data-load="../js/dropdown-cart.json"> <a href="javascript:;" class="dropdown-toggle link transition"> <i class="cart-icon iconfont"></i> <span class="cart-txt">购物车</span> <span class="cart-line">|</span> <span class="cart-txt">0</span> <i class="dropdown-arrow iconfont transition"></i> </a> <div class="dropdown-list dropdown-right"> <!-- 加载中 --> <div class="dropdown-loading cart-loading"></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/cart.js"></script> </body> </html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
cart.css
/*公共样式 */ .link{ color:#4d555d; } a.link:hover{ color:#f01414; } .fl{ float:left; } .fr{ float:right; } /*提取出过渡样式，可公用*/ .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } /*icon*/ @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */ src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'), url('../font/iconfont.woff?t=1582272973653') format('woff'), url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 14px; font-style: normal;/*i标签自带斜体效果*/ -webkit-font-smoothing: antialiased;/*在webkit内核和火狐浏览器中，抗锯齿*/ -moz-osx-font-smoothing: grayscale; } /*dropdown下拉组件*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:4; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; line-height:1;/*否则图标字体会继承父元素的line-height属性，占据过多空间*/ } .dropdown-list{ display: none; position: absolute; z-index:3; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } .dropdown-loading{ width:32px; height:32px; background:url(../img/loading.gif) no-repeat; margin:20px; } /*cart的dropdown独有样式*/ .cart{ width:160px; height:42px; background-color:#f01414; line-height:42px; z-index:2; margin:30px auto; } .cart-icon, .cart-line, .cart-txt{ display: inline-block; } .cart-txt{ margin:0 9px; } .cart .dropdown-toggle{ color:#fff; display: block; padding:0 0 0 12px; border-right:1px solid #f3f5f7; border-left:1px solid #f3f5f7; } .cart .dropdown-arrow{ color:#fff; margin-left:5px; vertical-align: middle; } .cart .dropdown-list{ width:300px; border: 1px solid #cdd0d4; padding:0 20px; background-color: #fff; top: 40px; box-shadow: 0 0 3px 3px rgba(100,100,100,.1); overflow:hidden; box-sizing:content-box; } /*无商品*/ .cart-no-icon{ display: block; float: left; font-size: 40px; color: #ccc; line-height: 77px; padding-left:80px; } .cart-no-txt{ display: block; float: right; color: #ccc; line-height: 20px; padding-top: 17px; padding-right:80px; } /*有商品*/ .cart-loading{ padding: 37px 113px; background-position: center; } .cart-list-h2{ font-weight: bold; font-size: 14px; } .cart-item{ height: 70px; padding: 0 12px; border-top: 1px solid #ccc; position: relative; } .cart-item-img{ display: block; top: 14px; position: absolute; } .cart-item-title{ position: absolute; top: 2px; left: 68px; } .cart-item-price{ position: absolute; top: 24px; left: 68px; } .cart-close{ position: absolute; right: 12px; top: 11px; font-size:20px; } .cart-end{ height: 45px; border-top: 1px solid #ccc; padding: 10px 0; position: relative; } .cart-end-txt{ position: absolute; left: 10px; } .totalPrice{ position: absolute; } .cart-end-btn{ position: absolute; right: 4px; top: 15px; background: red; color: #fff; border: none; padding: 10px 15px; border-radius: 3px; cursor: pointer; } /*鼠标移入*/ .cart:hover{ background-color:#fff; box-shadow:0 0 3px 3px rgba(100,100,100,.1); } .cart-item:hover{ background-color: #f3f5f7; } .cart-active .dropdown-toggle{ color:#f01414; background-color:#fff; border-color:rgb(209,211,215); } .cart-active .cart-icon, .cart-active .cart-line, .cart-active .cart-txt, .cart-active .dropdown-arrow{ color:#f01414; } .cart-active .cart-no-icon{ color:#ccc; } /*showhide*/ .fadeOut{ opacity: 0; visibility: hidden; } .slideUpDownCollapse{ height:0 !important;/*避免因为优先级不够而无法生效*/ padding-top:0 !important; padding-bottom:0 !important; } .slideLeftRightCollapse{ width:0 !important;/*避免因为优先级不够而无法生效*/ padding-left:0 !important; padding-right:0 !important; }
jquery.js
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js https://www.cnblogs.com/chenyingying0/p/12363739.html
cart.js
// 不要暴露在全局，使用匿名函数自执行 (function($){ "use strict"; //cart //绑定事件 显示之前加载数据 $(".cart").on("dropdown-show",function(e){ loadOnce($(this),buildCartItem); }).dropdown({ css3:true, js:true, animation:"slideUpDown" }).on("dropdown-hide",function(){ $(this).find(".dropdown-list").hide(); }); //创建Cart的item结构 function buildCartItem($elem,data){ var list=$elem.find(".dropdown-list"); var html=""; if(!data.length){ html=`<i class="cart-icon iconfont cart-no-icon"></i> <span class="cart-no-txt">购物车里还没有商品<br>赶紧去选购吧</span> `; }else{ html=`<h2 class="cart-list-h2">最新加入的商品</h2>`; for(var i=0;i<data.length;i++){ html+=`<div class="cart-item"> <img src="`+data[i]["img"]+`" class="cart-item-img"> <p class="cart-item-title text-ellipsis">`+data[i]["title"]+`</p> <p class="cart-item-price"> <b>￥<span class="item1">`+data[i]["price"]+`</span> x <span class="item2">`+data[i]["num"]+`</span></b> </p> <a href="#"><i class="cart-close" data-idx="`+i+`">x</i></a> </div>`; } html+=`<div class="cart-end"> <div class="cart-end-txt"> 共 <b id="totalC">0</b> 件商品 共计￥ <b id="totalP">0.00 </b> </div> <button class="cart-end-btn">去购物车</button> </div>`; } list.html(html); getTotal(); //点击删除 $(".cart-close").on("click",deleteCart); //删除后计算总价 $(".cart-close").on("click",getTotal); } //删除商品 function deleteCart(){ var index=$(this).data("idx"); $(".cart-item").eq(index).remove(); setIdx(); } //计算总价 function getTotal(){ var item1s=$(".item1"), item2s=$(".item2"), len=item1s.length, totalN=0, totalP=0; for(var i=0;i<len;i++){ totalN+=Number(item2s.eq(i).html()); totalP+=Number(Number(item1s.eq(i).html())*Number(item2s.eq(i).html()).toFixed(2)); } $("#totalC").html(totalN); $("#totalP").html(totalP); } //给.cart-close设置data-idx function setIdx(){ var i=0; $(".cart-close").each(function(){ $(this).data("idx",i); i++; }); } //加载一次数据 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){ success($elem,data); }).fail(function(){ $elem.data("loaded",false); }); } } })(jQuery);
接下来是数据来源 dropdown-cart.json
[ { "img":"../img/cart/1.png", "title":"adidas 训练 男子", "price":"10", "num":"1" }, { "img":"../img/cart/2.png", "title":"玉兰油多效修护三部曲", "price":"10", "num":"2" }, { "img":"../img/cart/3.png", "title":"apple iphone x", "price":"10", "num":"2" }, { "img":"../img/cart/4.png", "title":"飞利浦面条机", "price":"10", "num":"4" }, { "img":"../img/cart/5.png", "title":"反馈游戏方向", "price":"10", "num":"1" } ]
搞定~