abstract：jQuery實現(xiàn)下拉手風(fēng)琴效果（html部分）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>頁面中常用平級下拉菜單（手風(fēng)琴</title><link rel="stylesheet&qu
jQuery實現(xiàn)下拉手風(fēng)琴效果（html部分）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面中常用平級下拉菜單（手風(fēng)琴</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="">系統(tǒng)通知</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="">班級統(tǒng)計</a></li>
<li><a href="">課程題庫</a></li>
</ul>
</div>
<div class="parent">
<ul class="one">
<li><strong>校內(nèi)討論</strong></li>
</ul>
<ul class="two">
<li><a href="">我的帖子</a></li>
<li><a href="">新回復(fù)</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="">教學(xué)資源</a></li>
<li style="border-bottom:none;"><a href="">教學(xué)經(jīng)歷</a></li>
</ul>
</div>
</div>
</body>
</html>
2. jQuery實現(xiàn)下拉手風(fēng)琴效果（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;
}
Correcting teacher：查無此人Correction time：2019-05-23 13:14:25
Teacher's summary：完成的不錯。很多寫好的樣式，可以保存下來，留著以后用。繼續(xù)加油。