jQuery实现下拉手风琴效果
jQuery实现下拉手风琴效果（html部分）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面中常用平级下拉菜单（手风琴</title>
<link rel="stylesheet" href="style.css">
<script src="../static/js/jquery.js"></script>
<script>
$(function(){
$('.two').css('display','none');
var one = $('.one');
var two = $('.two');
$(one).each(function(i){
$(this).click(function(){
if($(two[i]).css('display')=='none'){
$(two[i]).slideDown(400);
}else{
$(two[i]).slideUp(400);
}
})
})
})
</script>
</head>
<body>
<div class="nav">
<div class="parent">
<ul class="one">
<li><strong>个人中心</strong></li>
</ul>
<ul class="two">
<li><a href="">我的信息</a></li>
<li><a href="">系统通知</a></li>
<li><a href="">短消息</a></li>
</ul>
</div>
<div class="parent">
<ul class="one">
<li><strong>课程中心</strong></li>
</ul>
<ul class="two">
<li><a href="">我的课程</a></li>
<li><a href="">课程资源</a></li>
<li><a href="">班级统计</a></li>
<li><a href="">课程题库</a></li>
</ul>
</div>
<div class="parent">
<ul class="one">
<li><strong>校内讨论</strong></li>
</ul>
<ul class="two">
<li><a href="">我的帖子</a></li>
<li><a href="">新回复</a></li>
<li><a href="">课程板块</a></li>
<li><a href="">问答中心</a></li>
</ul>
</div>
<div class="parent">
<ul class="one">
<li><strong>资源中心</strong></li>
</ul>
<ul class="two">
<li><a href="">教学资源</a></li>
<li style="border-bottom:none;"><a href="">教学经历</a></li>
</ul>
</div>
</div>
</body>
</html>
2. jQuery实现下拉手风琴效果（CSS部分）
* {margin: 0px;padding: 0px;font-size: 14px;font-family: "微软雅黑";}
a {text-decoration: none;color: #36b2f5;}
ul li {list-style: none;}
.nav {
width: 250px;
margin: 70px auto;
border-top: 3px solid #36b2f5;
border-bottom: 3px solid #36b2f5;
}
.nav .one {
height: 40px;
line-height: 40px;
text-align: center;
border-left: 1px solid #36b2f5;
border-bottom: 1px solid #36b2f5;
border-right: 1px solid #36b2f5;
}
.two {
width: 248px;
border-left: 1px solid #36b2f5;
border-right: 1px solid #36b2f5;
}
.two li {
height: 35px;
line-height: 35px;
text-align: center;
border-bottom: 1px dashed #36b2f5;
}