请教购物车下拉菜单的问题

<!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">&#xe609;</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">&#xe609;</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">
                                    &#xe609;
                                </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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

/*下拉菜单样式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);