老师，我的问题是本节的3-5自由编程。
来源：3-5 自由编程
慕斯0469344
2019-08-22 22:31:04
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3-5</title> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li> <li class="fl"><a href="javascript:;" 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"></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"></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"></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"></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> <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 dropdown fr" data-active="cart" data-load="js/dropdown-cart.json"> <div class="dropdown-toggle link"> <a href="javascript:; "target="_blank" class="cart-icon icon fl"></a> <p class="cart-text"> <span>购物车</span> <span>|</span> <span>18</span> </p> <a href="javascript:;" class="cart-arrow icon fr transition"></a> </div> <div class="dropdown-layer dropdown-right"> <!-- <div class="dropdown-loading"></div> --> <!-- <div class="cart-item"> <p class="cart-item-title">最新加入的商品</p> </div> <div class="cart-item-line"></div> <div class="cart-item"> <a href="javascript:;" class="cart-item-img fl img1"></a> <div class="cart-item-info fr"> <p class="cart-item-desc"><span class="fl">adidas 阿迪达斯 训练 男子</span><span class="fr">×</span></p> <br/> <p class="cart-item-price">￥335×1</p> </div> </div> <div class="cart-item-line"></div> <div class="cart-item"> <a href="javascript:;" class="cart-item-img fl img2"></a> <div class="cart-item-info fr"> <p class="cart-item-desc"><span class="fl">玉兰油多效修护三部曲套装</span><span class="fr">×</span></p> <br/> <p class="cart-item-price">￥199×2</p> </div> </div> <div class="cart-item-line"></div> <div class="cart-item"> <a href="javascript:;" class="cart-item-img fl img3"></a> <div class="cart-item-info fr"> <p class="cart-item-desc"><span class="fl">Apple iPhone 7(A1660)</span><span class="fr">×</span></p> <br/> <p class="cart-item-price">￥6188×1</p> </div> </div> <div class="cart-item-line"></div> <div class="cart-item"> <a href="javascript:;" class="cart-item-img fl img4"></a> <div class="cart-item-info fr"> <p class="cart-item-desc"><span class="fl">飞利浦面条机HR2356/31</span><span class="fr">×</span></p> <br/> <p class="cart-item-price">￥659×4</p> </div> </div> <div class="cart-item-line"></div> <div class="cart-item"> <a href="javascript:;" class="cart-item-img fl img5"></a> <div class="cart-item-info fr"> <p class="cart-item-desc"><span class="fl">罗技G29力反馈游戏方向</span><span class="fr">×</span></p> <br/> <p class="cart-item-price">￥2999×1</p> </div> </div> <div class="cart-item-line"></div> <div class="cart-item"> <div class="cart-item-total fl">共<span class="cart-item-num">0</span>件商品 共计<span class="cart-item-num">￥0.00</span></div> <div class="cart-item-go fr">去购物车</div> </div> --> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/showHide.js"></script> <script type="text/javascript" src="js/dropdown.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
base.css
/*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;
}
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;
}commom.css
/*公共样式*/
.container {
/*站点导航*/
width: 1200px;
margin: 0 auto;
}
a.link {
/*链接正常颜色*/
color: #4d555d;
}
a.link:hover {
/*链接经过颜色*/
color: #f01414 !important;
}
.dropdown {
position: relative;
}
.dropdown-toggle {
position: relative;
z-index: 2;
}
.dropdown-arrow {
display: inline-block;
line-height: 1;
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('iconfont.eot?t=1566452312957'); /* IE9 */
src: url('iconfont.eot?t=1566452312957#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAAB0gAAAMEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCJIIQATYCJAMMCwgABCAFhG0HQRthBsiemjwxZpQCCljLBQBwwePh6dh/587Mj0jK5N/WlFtBiQsahQuyuKDbWlrcAu9SV67ffpKfQdM/cgDRsDLg6HQBtANYIVWMRZ3UqT41V5mUmUsAmeBcip7+n2OmS5tAfqC5ZAcOcLznewOLjAuyO5AT9BvGrryIwwTqDesgbc9fuhaKFMaoQNxyLA2KUg5FYeFaobpkYRHPIV9tepD3GXjm/378h6KIpCozJh7enGfCzF/Fv0bkJJfAVhcBzPF0YMvImAEKcbHUcEIOAzNk9QpPUfNBtSKksdy5HD5D5VWb//BIgqhmpDaCCRRM/Cq2GbFwBLLOuiiDareRdAG4x8B12iSU9sFipe7ambr1l9MrZ2vXbXA2vZTUrL24/zIpOTKuXJG2pNLly6TsKAW3kIcXk0uqeoHU1L35mnT29rRfvVRfehVuJVbefu2feZQ+PvswebBhc+nGTaBr7n0xfv/Oqqer2VfECKjpyxCGF8IK+V7VfL3x7ieytVtR6n6qw82M/CGvbG6t+xkv7m7vmZmspIvp0gql7lwj7THO1SkVyyoU6c3MpPbTxKdJWL76fzv7O77MqcsY7WSMyuILqCx/lH/A33jZ5Tc7yif+FakFfDtmo7+gsiJDrURr5utuVyQonG0oc5EFaosC2Y6BRybUq0cFtrT71l/SdUuhUKsrhqTGEGS1RpAFOwNVGqxAtVprUG/aguUNOnCyKHWYchxAaPUckmZvIGv1BVmw01Cl2x+o1hoy1DuK6g0bjIVD5nDUBJpU30sdIwqZpRYkSF+NVtbXeJLt49cjzzhu2tvVkw0vwBD5GFMyu6w+IRhlPArofHAc+n5EYx65aIguW4h4rLublX1TlxEFQGzhkEZAJkq3F+UwRELMbS6Q3M+vhixZPg2vqatQroe4DKdzqleXnhbIBYKwVd21PJOxi6WPIDAUw0UC1HzQD/l8ESou7+dCBqGL3cMXG9NtNmJtBV3zi4Ln2wL1jEk5UuQoGu87mq+5TlQoomyRZcfvzho2AgA=') format('woff2'),
url('iconfont.woff?t=1566452312957') format('woff'),
url('iconfont.ttf?t=1566452312957') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1566452312957#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-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;
}
/*.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 {
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;
}
/* showhide */
.fadeOut{
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
/* 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;
font-size: 14px;
color:#fff;
background-color: #07111b;
text-align: center;
cursor: pointer;
border:none;
}
.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-text{
font-size: 14px;
line-height: 42px;
color:#fff;
text-align: center;
}
.cart .cart-arrow{
margin-right: 8px;
display: inline-block;
margin-top: -28px;
color:#fff;
}
.cart .cart-icon{
margin-left: 10px;
display: inline-block;
color:#fff;
line-height: 42px;
}
.cart .dropdown-layer {
width:320px;
height: 370px;
display: block;
top: 40px;
background-color: #fff;
border: 1px solid #cdd0d4;
border:1px solid #cdd0d4;
box-shadow:#ddd 0px 0px 10px ;
overflow-y: scroll;
}
.cart-item{
height: 52px;
margin:0 12px;
}
.cart-item-title{
line-height: 52px;
font-size: 14px;
font-weight: normal;
color:#000;
}
.cart-item-img{
display: block;
width:70px;
height: 40px;
margin-top: 6px;
}
.cart-item .img1{
background: url(../img/cart/1.png) no-repeat;
}
.cart-item .img2{
background: url(../img/cart/2.png) no-repeat;
}
.cart-item .img3{
background: url(../img/cart/3.png) no-repeat;
}
.cart-item .img4{
background: url(../img/cart/4.png) no-repeat;
}
.cart-item .img5{
background: url(../img/cart/5.png) no-repeat;
}
.cart-item-info{
width:208px;
height: 52px;
}
.cart-item-info .cart-item-desc{
font-size: 12px;
color:#000;
margin-top: 13px;
}
.cart-item-info .cart-item-price{
font-size: 12px;
color:#000;
margin-top: 5px;
}
.cart-item-line{
width: 280px;
height: 1px;
background-color: #cdd0d4;
margin:0 12px;
}
.cart-item-total{
height: 52px;
line-height: 52px;
font-size: 14px;
color:#000;
}
.cart-item-go{
width:52px;
height: 35px;
line-height: 35px;
background-color: red;
margin-top: 8px;
color:#fff;
}
.cart-item-num{
font-weight: bold;
}
.cart-active .dropdown-toggle .cart-text{
color:#f00;
background-color: #fff;
}
.cart-active .dropdown-toggle .icon{
color:#f00;
background-color: #fff;
}index.css
/* 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{
color:#f01414;
margin-left: 15px;
}
.nav-site-signup,.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin:0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/* 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;
}
.header .cart{
width:160px;
height: 42px;
background-color: red;
margin-left: 50px;
}index.js
(function($){
'use strict';
// menu
$('.dropdown').on('dropdown-show',function(e){
// console.log(e.type);
var $this = $(this),
dataLoad = $this.data('load');
// $layer.html('<li class="dropdown-loading"></li>');
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);
});
}
});
$('.dropdown').dropdown({
css3:true,
js:false
});
})(jQuery);老师，我的问题是购物车在加入数据后的显示和隐藏。还有其他的视频中老师已经封装好的dropdown.js和showHide.js，在这里没写。对于购物车加入数据后的显示和隐藏，应该是在index.js中实现吧。老师，您看我的思路对不，我的思路是在没加载到数据的时候返回第一幅图片的内容（这个要用函数实现吗）；在加载到数据的时候把购物车中的内容显示出来。但是我没实现，首先，我不知道该怎么用程序实现，另外，我的html是不是写的有问题，因为我的html结构不像视频中老师写站点菜单中的下拉层那样有规律。
请老师赐教，不胜感激。
写回答
1回答
-
同学你好，
1、同学的思路是正确的。首先需要通过ajax获取json文件中的数据，然后对获取到的数据进行判断：
如果数据为空，就要手动在购物车中添加内容，也就是第一张图片中的提示信息。如果数据不为空就渲染到页面上。例如：
（1）当把json文件中数据替换成一个空数组时：
效果：
（2）json文件中有数据时：
购物车下拉菜单面板中的布局和样式还需要完善，同学明白这个思路怎么写之后就会容易一些了。
2、购物车下拉菜单面板默认应该是隐藏的，所以在common.css中显示样式可以去掉：
html布局写的没有问题，这样写就可以。
自己可以完善测试下，祝学习愉快！
0
相似问题