一、
任务：左导航特效
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){$ ("#nav .navsBox .firstNav").click(function(){
$("#nav .navsBox ul").toggle(); /** var$ list = $("#nav .navsBox ul");$ list.toggle();
**/
})
$("#nav .navsBox ul li").mouseover(function(){$ (this).addClass("onbg");
}).mouseout(function(){
$(this).removeClass("onbg");
});
})
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-size: 12px;
}

nav .navsBox{

width: 160px;

}

nav .navsBox .firstNav{

height:45px;
line-height:45px;
background-color:#EBEBEB;
border-left:10px solid #FE705C;
padding-left:20px;
width:130px;
font-weight:bold;
cursor: pointer;

}

nav .navsBox ul{

display:none;
list-style:none;

}

nav .navsBox ul li{

display:block;
height:45px;
line-height:45px;
padding-left:70px;
width:90px; 
background:#F2F2F2 33px 7px no-repeat;

}

nav .navsBox ul li.jedh{

background-image:url("./images/huan.gif");

}

nav .navsBox ul li.jlbbyk{

background-image:url("./images/you.gif");

}

nav .navsBox ul li.jwljb{

background-image:url("./images/gouwu.gif");

}

nav .navsBox ul li.mrljb{

background-image:url("./images/meiri.gif");

}

nav .navsBox ul li.vipjtj{

background-image:url("./images/zhe.gif");

}

nav .navsBox ul li.onbg{

background-color:#F9DBD1;

}

nav .navsBox ul li a{

color:#000;
text-decoration:none;

}

</style>
</head>
<body>
<div id="nav">
<div class="navsBox">
<div class="firstNav">购物特权</div>
<ul>
<li class="jedh"><a href="#">全额兑换</a></li>
<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
<li class="jwljb"><a href="#">购物领金币</a></li>
<li class="mrljb"><a href="#">每日领金币</a></li>
<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
</ul>
</div>
</div>
</body>
</html>

二、
任务：FAQ列表
代码：
1.html文件
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){$ ("#menu li.lastone").click(function(){
//切换菜单
$("#menu li:gt(6):not(:last)").toggle(); //更换底部夹头方向$ (this).toggleClass("up");
})
})
</script>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}

a{
color:#000;
text-decoration:none;
}

menu{

margin:30px;
width:188px;
background-color:#EFFDFA;

}

menu .top{

height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid #93D6C5;
border-bottom:none;

}

menu ul.nav{

list-style:none;

}

menu ul.nav li{

display:block;
height:30px;
line-height:30px;
border:1px solid #93D6C5;
border-top:none;
 padding-left:30px;
background:url(images/point.jpg) no-repeat 15px center;

}

menu ul.nav li.lastone{

border:none;
cursor:pointer;
background:#fff url(images/up.jpg) no-repeat center top;

}

menu ul.nav li.up{

background:#fff url(images/down.jpg) no-repeat center top;

}
span.icon{
float:right;
margin-right:10px;
margin-top:10px;
}
</style>

</head>
<body>
<div id="menu">
<div class="top">全部商品详细分类</div>
<ul class="nav">
<li><a href="#">尾品汇</a></li>
<li><a href="#">图书音像数字管</a></li>
<li><a href="#">美妆个护</a></li>
<li><a href="#">家具、家纺、家装</a></li>
<li><a href="#">鞋靴、箱包</a></li>
<li><a href="#">珠宝装饰</a></li>
<li><a href="#">手表/眼镜/礼品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">食品、茶、酒</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑办公</a></li>
<li class="lastone"></li>
</ul>
</div>

</body>
</html>

2019-10-31（1）