摘要：页面采用div+li+jq实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>垂直手风琴导航</title&g
页面采用div+li+jq实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>垂直手风琴导航</title>
<link rel="stylesheet" type="text/css" href="static/css/style4.css">
<script src="static/js/jquery.js"></script>
<script>
$(function(){
$('.two').css('display', 'none') //运用样式表来选取
//$('.two').hide();//运用JQ自带的函数
var one=$('.one')
var two=$('.two')
$('.one').each(function(i){
$(this).click(function(){
if($(two[i]).css('display')=='none'){
$(this).addClass('link')
$(two[i]).slideDown(400)
}else{
$(this).removeClass('link')
$(two[i]).slideUp(400)
}
})
})
})
</script>
</head>
<body>
<div>
<ul>
<li>
<div class="one ">
个人中心
</div>
<ul>
<li><a href="#">我的信息</a></li>
<li><a href="#">我的课程</a></li>
<li><a href="#">我的优惠</a></li>
<li><a href="#">我的行程</a></li>
</ul>
</li>
<li>
<div>
商品类型
</div>
<ul>
<li><a href="#">我的信息</a></li>
<li><a href="#">我的课程</a></li>
<li><a href="#">我的优惠</a></li>
<li><a href="#">我的行程</a></li>
</ul>
</li>
<li>
<div>
帮助中心
</div>
</li>
</ul>
</div>
</body>
</html>*{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #1BAAE2;
font-size: 12px;
}
.nav{
width:250px;
margin:20px auto 0px;
border-top:4px solid #1BAAE2;
border-left:1px solid #1BAAE2;
border-bottom:3px solid #1BAAE2;
border-right:1px solid #1BAAE2;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.nav .one{
height:40px;
line-height:40px;
text-align: center;
font-size:18px;
border-bottom:1px solid #1baae2;
cursor: pointer;
}
.link{
color:#fff;
background:#434346;
}
.nav .two li{
height:35px;
line-height:35px;
text-align: center;
font-size:16px;
background: #ccc;
border-bottom:1px dotted #1baae2;
}
.nav .two li a{
font-size:16px;
}
批改老师：韦小宝批改时间：2019-02-12 16:37:36
老师总结：不错不错 写的很棒 ！ 看来你对jQuery掌握的还是很不错的！课后没事要记得多练习练习哦 ！
