老师问2个问题

老师问2个问题

问题1：

未加载使用json文件前，index.html里面的购物车代码预览效果如下：

http://img1.sycdn.imooc.com//climg/5ec0d95b0904a38107110832.jpg

但加载了json文件 替换了购物车cart.html()里面的内容以后 css属性有些不生效了，如位置属性 overfllow:auto 等这些属性样式都消失了，排版都跑位了。（这里js遍历加载的json数据和html格式和上边的是一样的）如图：

http://img1.sycdn.imooc.com//climg/5ec0da33097d4c7906630798.jpg

问题2：

在鼠标移入移出购物车图标的时候 也就是红色和白色背景变换的时候 会有一个不能完全填充全部红色背景色余留出了白色的边框是怎么回事。如图：

http://img1.sycdn.imooc.com//climg/5ec0db16092f229203230168.jpg

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!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="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
            <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
            <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  transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe638;</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="menu dropdown fl" data-active="menu">
                <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe638;</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" data-load="./js/dropdown-seller.json">
                <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></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>
                        <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 transition">联系客服<i class="dropdown-arrow icon transition">&#xe638;</i></a>
                <ul class="dropdown-layer dropdown-right">
                    <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                    <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- 站点导航结束 -->
  
 <!-- header区开始 -->
    <div class="header">
        <div class="container">
            <h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
            <div id="header-search" class="search fl">
                <form action="https://s.taobao.com/search"  class="search-form">
                    <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
                    <input type="submit" value="搜索" class="search-btn fl" />
                </form>
                <ul class="search-layer">
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                </ul>
            </div>
            <div class="cart fr" id="cart" data-load="./js/cart.json">
                <a href="###" class="dropdown-toggle cart-title cart-link transition">
                    <span class="cart-icon"><i class="icon">&#xe614;</i></span>
                    <span class="cart-icon"><i class="icon">购物车</i></span>
                    <span class="cart-icon"><i class="icon">|</i></span>
                    <span class="cart-icon"><i class="icon">0</i></span>
                    <span class="cart-icon"><i class="icon dropdown-arrow">&#xe638;</i></span>
                </a>
                    <ul class="dropdown-layer cart-layer" data-active="cart">
                        <!-- <li class="cart-loading"></li> -->
 
                        <li class="dropdown-layer cart-layer-item" data-load="./img/cart/1.png"></li>
                         
                        <li class="cart-layer-item-title">最新加入商品</li>
                        <ul class="cart-layer-text">
                        <li class="cart-layer-item"> 
                            <table>
                                <tr>
                                    <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                    <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                    <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                </tr>
                                <tr>
                                    <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                </tr>
                            </table>
                            </li>
                                   <li class="cart-layer-item"> 
                                    <table>
                                        <tr>
                                            <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                            <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                            <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                        </tr>
                                        <tr>
                                            <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                        </tr>
                                    </table>
                                    </li>
                                    <li class="cart-layer-item"> 
                                        <table>
                                            <tr>
                                                <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                            </tr>
                                            <tr>
                                                <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                            </tr>
                                        </table>
                                        </li>
                                        <li class="cart-layer-item"> 
                                            <table>
                                                <tr>
                                                    <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                    <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                    <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                                </tr>
                                                <tr>
                                                    <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                                </tr>
                                            </table>
                                            </li>
                                            <li class="cart-layer-item"> 
                                                <table>
                                                    <tr>
                                                        <td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="./img/cart/1.png"></a>  </td>
                                                        <td class="cart-layer-item-text"><a href="###">adidas 阿迪达斯训练 男子</a></td>
                                                        <td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td class="cart-layer-item-text"><a href="###">￥335 x1</a></td>
                                                    </tr>
                                                </table>
                                                </li>
                       </ul>
    
                       <li class="cart-layer-item-bottom">
                           <span class="cart-layer-item-bottom-text fl">共0件商品 共计￥0.00</span>
                           <span class="cart-layer-item-btn fl">去购物车</span>
                       </li>
                   </ul>
                    </ul>
             
            </div>
        </div>
    </div>
 
 
    <!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
    <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/search.js"></script>
    <script src="js/index.js"></script>
     
</body>
</html>

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
/*nav-site*/
.nav-site{ /*站点导航整体设置*/
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{  /*站点导航内容块整体设置*/
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  /*站点导航“亲，请登陆”设置*/
    margin-left:15px;
    color:#f01414;
}
.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:43px;
    background-color:#fff;
    z-index: 1;
    border: 1px solid red;
} */
.dropdown-left{
    left:0;
    right:auto;
 
}
.dropdown-right{
    right:0;
    left:auto;
 
}
.dropdown-item{
    display:block;
    height:30px;
    line-height:30px;
    padding:0 12px;
    color:#4d555d;
    white-space: nowrap;
 
}
.dropdown-item:hover{
    background-color: #f3f5f7;
}
 
/*下拉菜单通过js和css来实现dropdown*/
 
/*.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
    background-color:#fff;
    border-color:#cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
    background-image:url(../img/dropdown-arrow-active.png);
}
 
.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
    display:block;
}*/
 
/*header*/
.header{
    width: 100%;
    height: 124px;
    background-color: #f3f5f7;
}
    .header-logo,
    .header .search,
    .header .cart {
        margin-top: 36px;
    }
.header-logo{
    display: block;
    width:136px;
    height: 48px;
    background: url(../img/header-logo.png) no-repeat;
    margin-left:15px;
     
}
 
.header .search{
    margin-left: 145px;
}
 
 
/* cart */
.cart .dropdown-arrow{
    display: inline-block;
    vertical-align: middle ;
    margin-left: 0;
}
 
 
.cart-icon{
    padding-left: 5px;
}

common.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
/*公共样式*/
 
    .container {
        /*站点导航*/
        width: 1200px;
        margin: 0 auto;
    }
 
    a.link {
        /*链接正常颜色*/
        color: #4d555d;
    }
 
 
    a.link:hover {
        /*链接经过颜色*/
        color: #f01414 !important;
    }
 
    .dropdown {
        position: relative;
    }
 
    .dropdown-toggle {
        position: relative;
    }
 
    .dropdown-arrow {
        display: inline-block;
        line-height: 1;
        /*background-repeat: no-repeat;*/
        vertical-align: middle;
         
    }
 
    .dropdown-layer {
        display: none;
        position: absolute;
        z-index: 1;
    }
 
    .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;
        }
 
    .text-hidden{
        text-indent: -9999px;
        overflow: hidden;
    }
 
 
.text-ellipsis{
    text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
}
 
/*icon*/
@font-face {
    font-family: "iconfont";
    src: url('../test/font/iconfont.eot?t=1477124206');
    /* IE9*/
    src: url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../test/font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
    url('../test/font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
    /* iOS 4.1- */
}
 
.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
 
[class*="-active"] .dropdown-arrow {
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
 
.transition {
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
 
 
/*showhide*/
 
 .fadeOut {
        visibility: hidden !important;
        opacity: 0 !important;
    }
 
    .slideUpDownCollapse {
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
 
    .slideLeftRightCollapse {
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
 
 
 
 
 
/*.menu .dropdown*/
 
.menu .dropdown-toggle {
    display: block;
    height: 100%;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
}
 
.menu .dropdown-arrow {
    /*width: 8px;
    height: 6px;
    background-image: url(../img/dropdown-arrow.png);*/
    margin-left: 5px;
}
 
.menu .dropdown-layer {
    top: 43px;
    background-color: #fff;
    border: 1px solid #cdd0d4;
}
 
.menu-item {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    color: #4d555d;
    white-space: nowrap;
}
 
.menu-item:hover {
    background-color: #f3f5f7;
}
 
.menu-active .dropdown-toggle {
    background-color: #fff;
    border-color: #cdd0d4;
}
 
.menu-active .dropdown-arrow {
    /*background-image: url(../img/dropdown-arrow-active.png);*/
}
 
/*.menu-active .dropdown-layer {
    display: block;
}*/
 
 
 
 
 
/*search*/
    .search {
        position: relative;
        border: 1px solid #cfd2d5;
    }
    .search-inputbox {
        width: 585px;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        background-color: #fff;
        border: none;
    }
    .search-btn {
        width: 73px;
        height: 40px;
        line-height: 40px;
        background-color: #07111b;
        border:none;
        font-size: 14px;
        color: #fff;
        text-align: center;
        cursor:pointer;
    }
    .search-layer {
        display: none;
        position: absolute;
        top: 100%;
        left: -1px;
        width: 100%;
        background-color: #fff;
        border: 1px solid #cfd2d5;
    }
    .search-layer-item {
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        cursor: pointer;
 
    }
    .search-layer-item:hover {
        background-color: #f3f5f7;
    }
 
 
/* cart */
 
    .cart{
        position: relative;
        margin-right:15px;
        z-index: 0 !important;
    }
 
    .cart-link{
        color: white;
    }
 
    [class*="-active"] .cart-title{
        color: #f01414;
        background-color: white;
        box-shadow: -1px -2px 3px rgb(192, 192, 192);
    }
 
    .cart-title{
        position: absolute;
        width: 124px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-color: #f01414;
 
    }
 
    .cart-layer{
        padding: 0 20px;
        margin-left: -157px;
        margin-top:-4px;
        position: absolute;
        width: 270px;
        height: 410px;
        overflow: hidden;
        z-index: 0 !important;
        box-shadow: -1px -1px 3px rgb(192, 192, 192);
        background-color:#fff;
    }
 
    .cart-layer-text{
        position: relative;
        width: 270px;
        padding-right: 20px;
        height: 300px;
        overflow: auto;
    }
 
    .cart-layer-item{
 
        border-bottom: 1px solid rgb(192, 192, 192); 
        height: 70px;
    }
 
 
 
    .cart-layer-item-title{
        margin-left: -20px;
        width: 300px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 30px;
        height: 40px;
        line-height: 40px;
        box-shadow: 0px -2px 13px rgba(189, 187, 187, 0.788);
    }
 
    /* cart-table */
    .cart-layer-item table{
        position: absolute;
        margin-top: 8px;
        left: 5px;
    }
 
    .cart-layer-item td{
        /* border: 1px solid red; */
        height: 8px;
        line-height: 20px;
    }
    .cart-layer-item tr{
        width: 200px;
    }
 
    .cart-layer-item-text{
        padding: 5px 0 0 15px;
        font-weight: bold;
    }
 
    .cart-layer-item-btn{
        position: absolute;
        margin-top: 17px;
        width: 70px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #f01414;
        display: block;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        margin-left: 190px;
    }
 
    .cart-layer-item-bottom-text{
        position: absolute;
        height: 70px;
        width: 300px;
        margin-left: -20px;
        line-height: 70px;
        font-weight: bold;
        font-size: 14px;
        padding-left: 35px;
        box-shadow: 0px -1px 5px rgba(189, 187, 187, 0.788);
    }
 
    .cart-layer-item-close a{
        position: absolute;
        padding-left: 25px;
        font-weight: bold;
        color: rgb(124, 124, 124);
        top: 18px;
        width: 1px;
        height: 1px;
    }
 
    .cart-loading{
        display: block;
        width:500px;
        height: 200px;
        background: url(../img/loading.gif) no-repeat;
        margin: 200px 0px 60px 115px;
    }

base.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*css reset*/
    /*清除内外边距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表单元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }
 
    /*重置默认样式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }
 
    a {
        text-decoration: none;
        color: black;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
 
/*常用公共样式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;
         
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
(function($) {
 
//menu
    $(".dropdown").dropdown({
 
        css3: true,
        js: false
 
    });
 
    $('.dropdown').on('dropdown-show', function(e) {
        var $this = $(this),
            dataLoad = $this.data('load');
            console.log(dataLoad);
        if (!dataLoad) return;
 
        if (!$this.data('loaded')) {
            var $layer = $this.find('.dropdown-layer'),
                html = '';
 
            $.getJSON(dataLoad, function(data) {
                // console.log(1);
                // setTimeout(function () {
                for (var i = 0; i < data.length; i++) {
                    html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
                }
                $layer.html(html);
                $this.data('loaded', true);
                // }, 1000);
            });
        }
    });
 
//header search
    var $headerSearch = $('#header-search');
    var html = '',
        maxNum = 10;
 
    // 获得数据处理
    $headerSearch.on('search-getData', function(e, data) {
        var $this = $(this);
        html = createHeaderSearchLayer(data, maxNum);
        $this.search('appendLayer', html);
        // 将生成的html呈现在页面中        
        if (html) {
            $this.search('showLayer');
        } else {
            $this.search('hideLayer');
 
        }
    }).on('search-noData', function(e) {
        // 没获得数据处理
        $(this).search('hideLayer').search('appendLayer', '');
 
    }).on('click', '.search-layer-item', function() {
        // 点击每项时，提交
        $headerSearch.search('setInputVal', $(this).html());
        $headerSearch.search('submit');
    });
 
    $headerSearch.search({
        autocomplete: true,
        css3: false,
        js: false,
        animation: 'fade',
        getDataInterval: 0
    });
 
    // 获取数据，生成html
    function createHeaderSearchLayer(data, maxNum) {
        var html = '',
            dataNum = data['result'].length;
 
        if (dataNum === 0) {
            return '';
        }
        for (var i = 0; i < dataNum; i++) {
            if (i >= maxNum) break;
            html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>';
        }
        return html;
 
    }
 
// header cart
 
    $('.cart').dropdown({
        css3:true,
        js:true,
        animation:'fadeslideUpDown',
        active:'cart'
    });
 
    $('.cart').on('dropdown-show',function(e){
        // alert(2)
        var $this=$(this),
        dataLoad=$this.data('load');
        console.log(dataLoad);
        // alert(4);
        if(!dataLoad) return;
 
        if(!$this.data('loaded')){
            var $layer=$this.find('.cart-layer'),
            html='',
            html1='<li class="cart-layer-item-title">最新加入商品</li>',
            html2='',
            html3='<li class="cart-layer-item-bottom"><span class="cart-layer-item-bottom-text fl">共0件商品 共计￥0.00</span><span class="cart-layer-item-btn fl">去购物车</span></li>';
             
 
 
            $.getJSON(dataLoad,function(data){
             
                for(var i=0;i<data.length;i++){
                    html2+='<li class="cart-layer-item">'+
                    '<table>'+
                        '<tr>'+
                            '<td rowspan="2" class="img"><a href="#" class=" cart-layer-item-image fl"><img src="'+data[i].url+'"></a></td>'+
                            '<td class="cart-layer-item-text"><a href="###">'+data[i].name+'</a></td>'+
                            '<td rowspan="2" class="cart-layer-item-close"><a href="###">X</a></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td class="cart-layer-item-text"><a href="###">'+data[i].price+'</a></td>'+
                        '</tr>'+
                    '</table>'+
                    '</li>';
                }
 
 
                     
                html=html1+html2+html3;
                $layer.html(html);
                $this.data("loaded",true);
                 
            });//eeeeeee
 
 
        }
    });
 
 
})(jQuery);

cart.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
[
    {
        "url":"./img/cart/1.png",
        "price":"￥335",
        "name":"adidas 阿迪达斯 训练 男子"
    },
    {
        "url":"./img/cart/2.png",
        "price":"￥199",
        "name":"玉兰油多效呵护三部曲套装"
    },
    {
        "url":"./img/cart/3.png",
        "price":"￥6188",
        "name":"Apple iPhone 7（A1660）"
    },
    {
        "url":"./img/cart/4.png",
        "price":"￥659",
        "name":"飞利浦面条机123456/11"
    },
    {
        "url":"./img/cart/5.png",
        "price":"￥2999",
        "name":"罗技G29 力反馈游戏方向"
    },
    {
        "url":"./img/cart/6.png",
        "price":"￥6188",
        "name":"adidas 阿迪达斯 训练 男子"
    },
    {
        "url":"./img/cart/7.png",
        "price":"￥199",
        "name":"adidas 阿迪达斯 训练 男子"
    }
]
陈立天 2020-05-17
源自： 实战：搜索功能组件化   3-5 自由编程
38
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

9回答
好帮手慕久久 回答被采纳获得+3积分 2020-05-19 13:59:53

同学你好，layer的显示问题是将动画形式设置为slideUpDown（animation: 'slideUpDown'），并且在ie浏览器中预览时出现的吗？如果是的话，老师这边经过测试，发现ie8和ie9可以正常显示，ie10和ie11不可以，主要原因是底部元素设置的定位属性影响了动画，可调整如下：

http://img1.sycdn.imooc.com//climg/5ec375bf09ebe22906840649.jpg

大多数浏览器都会将css和js等文件缓存起来，所以有时候更改内容页面会不刷新，可以采取ctrl+f5强制刷新页面。

phpstudy内部可能对缓存做了处理，所以会及时更新页面。

另外，ie浏览器有很多兼容性问题，建议同学在学习阶段，使用谷歌浏览器测试代码，实际工作中，大部分公司也不考虑兼容性问题，同学只需了解常见的一些兼容性问题即可。

祝学习愉快！

0
收起回答
提问者 陈立天 2020-05-18 19:40:52

完全显示出来layer是这样的。。对比一下三张图就看到明显的显示不一致了，怎么解决这个问题？

http://img1.sycdn.imooc.com//climg/5ec27421097f7c5006080741.jpg

0
收起回答
  • 提问者 陈立天 #1
    老师发现问题了，在本地的IE浏览器打开就会这样， 用phpstudy打开就不会了。 这是什么原因？
    2020-05-18 21:44:45
  • 提问者 陈立天 #2
    另外还想知道的是我把css js img 这些文件放到phpstudy目录下 发现把目录的css 和js等文件删除了 访问该网页的js和css仍然生效？ 然后清除了缓存就没了。 是不是浏览器所有访问过的网页 css js 都会缓存到浏览器当中？
    2020-05-18 21:58:21
提问者 陈立天 2020-05-18 19:39:08

http://img1.sycdn.imooc.com//climg/5ec2735609e3d23205610711.jpg

http://img1.sycdn.imooc.com//climg/5ec273a009ee55a005520666.jpg

把layer和btn两个颜色区分开来，然后这里的layer明显下拉到接近底部了，这里的btn的背景色才开始出现。。

这个很明显呀老师，哪里不明显了。。这是什么原因造成的？（图片是在layer展开的瞬间截图的）

0
收起回答
好帮手慕久久 2020-05-18 13:40:55

同学你好，可以将“cart-layer”的背景色设置成红色，试试效果。老师在本地浏览器上测试，同学所说的现象并不明显；实际开发过程中，一般不会追究这些小的细节，如果动画影响了用户的体验，那可以考虑去掉动画，保证功能正常即可。如果同学的动画很卡顿，可以将代码粘贴出来，老师帮着测一下。

祝学习愉快！

0
收起回答
好帮手慕久久 2020-05-18 10:11:27

动画是加在“cart-layer”上，所以“cart-layer”内部的元素的透明度是受“cart-layer”的动画控制的，当“cart-layer”的透明度为0.5时，内部元素的透明度也是0.5；之所以出现看着变化不一样快，可能是因为元素的颜色不一样，造成了视觉效果不同，同学不用纠结。

祝学习愉快！

0
收起回答
  • 提问者 陈立天 #1
    但是如果是在以后工作中实际开发的话，用户使用起来就感觉好像程序很卡顿的感觉，会给用户造成不好的用户体验，如何解决这个 变化速度不一样 的问题 看起来让他流畅一点呢？
    2020-05-18 11:15:40
好帮手慕久久 2020-05-18 09:57:03

同学你好，第三个回答的具体思路如下：

整体结构：

http://img1.sycdn.imooc.com//climg/5ec1eab709aff9b508110574.jpg

样式：

http://img1.sycdn.imooc.com//climg/5ec1eb540927669508650451.jpg

http://img1.sycdn.imooc.com//climg/5ec1eac609389c1c04190297.jpg

0
收起回答
提问者 陈立天 2020-05-17 19:44:55

http://img1.sycdn.imooc.com//climg/5ec1237a091aa4bb06410730.jpg

另外第一点和第二点根据老师修改了之后没有问题了。。 就是发现移入移除这个购物车图标之后 这个layer展开完了和这个按钮的展开不同步，按钮好像要比layer展开要慢一点，这是为什么？

0
收起回答
  • 提问者 陈立天 #1
    还有这个右边的交叉也不对齐，标题长一点了这个交叉就往右边挤过去了
    2020-05-17 19:46:36
  • 提问者 陈立天 #2
    交叉的问题已经解决了 还有其他的没解决
    2020-05-17 20:18:30
好帮手慕久久 2020-05-17 19:08:19

同学你好，代码中的问题如下：

1. 使用cart.json动态渲染出来的结构和不使用cart.json的静态html结构不一样，所以样式不一样。如下：

http://img1.sycdn.imooc.com//climg/5ec11a75095a1ac905540373.jpg

http://img1.sycdn.imooc.com//climg/5ec11a90096498f905540356.jpg

2. 白色的边框是因为样式中设置了按钮的边框，如下：

http://img1.sycdn.imooc.com//climg/5ec11a9709fba7c405540545.jpg

可以去除边框，并微调下拉框的位置：

http://img1.sycdn.imooc.com//climg/5ec11a9d09a6b84f05540260.jpg

http://img1.sycdn.imooc.com//climg/5ec11aa50920873305540338.jpg

3. 可以不给“cart-layer”设置固定高度，将高度等样式对应设置在两种不同的结构上，一种是有数据的，一种是没数据的，然后根据请求回来的数据渲染其中一种结构。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

0
收起回答
  • 提问者 陈立天 #1
    第三个回答 我不太明白。将高度等样式对应设置在两种不同的结构上？能否把思路在说清晰点吗
    2020-05-17 19:43:15
提问者 陈立天 2020-05-17 14:36:57

在补充一个问题。就是关于没有json数据的时候 如何弄成这样？能不能提供下思路，并且怎么修改这个高度，也就是有json的时候又是特定高度，没有json的时候这个layer高度又比较矮。。

http://img1.sycdn.imooc.com//climg/5ec0db52098ce32a05330298.jpg

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师问2个问题
12 0 4
老师，问一个问题
23 0 5
可能是我的意思没表达清楚，我的js代码有2个问题，老师一直在我的问题外徘徊。。没有回答主题
70 0 7
关于作业中的2个问题？
9 0 3
老师 ，定时器问题
13 0 5

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码