最新在学习JS写一些实用的小玩意——手风琴
CSS样式：
<style type="text/css">
* {
margin: 0px;
border: 0px;
padding: 0px;
} .leftli {
float: left;
width: 200px;
background: #3D4444;
} ul li {
display: block;
line-height: 25px;
width: 200px;
height: 25px;
list-style-type: none;
border-collapse: collapse;
font-size: 15px;
color: #DBDBDB;
margin-left: 20px;
} ul li:hover {
background: #FFFFFF;
color: #000000;
cursor: pointer;
height: 40px;
line-height: 40px;
font-size: 22px;
} a {
display: block;
line-height: 50px;
width: 200px;
height: 50px;
list-style-type: none;
font-size: 30px;
left: 5px;
color: #F9F9F9;
font-size: bold;
} a:hover {
background: #FFFFFF;
color: #2FA8EC;
cursor: pointer;
height: 65px;
line-height: 65px;
font-size: 40px;
text-align: center;
}
</style>
HTML布局：
<body>
<div class="leftli">
<div>
<a>First</a>
<ul>
<li>First One</li>
<li>First Two</li>
</ul>
<a>Second</a>
<ul>
<li>Second One</li>
<li>Second Two</li>
</ul>
<a>Third</a>
<ul>
<li>Third One</li>
<li>Third Two</li>
</ul>
<a>Fourth</a>
<ul>
<li>Fourth One</li>
<li>Fourth Two</li>
</ul>
<a>Fifth</a>
<ul>
<li>Fifth One</li>
<li>Fifth Two</li>
</ul>
<a>Sixth</a>
<ul>
<li>Sixth One</li>
<li>Sixth Two</li>
</ul>
</div>
</div>
</body>
引用的JS
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
JS关键代码
<script type="text/javascript">
$(function() {
//设置DIV的高度跟随屏幕变化而变化，类似于自适应
$(".leftli").height(document.body.scrollHeight);
//隐藏除第一个元素以外的所有元素
$(".leftli ul:gt(0)").hide();
})
//bind()为.leftli a的a生成点击事件
$(".leftli a").bind("click", function() {
//.netx("li")获取同级的下一个li元素
//slideToggle(300)展开/关闭当前被点击的ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"
//siblings("ul")遍历所有的ul元素
//slideUp(300)隐藏已经被展开的其他ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"
$(this).next("ul").slideToggle(300).siblings("ul").slideUp(300);
})
</script>
JS大致思路就是先获取当前被点击的a元素，然后展开a元素下的ul元素，再遍历所有的ul元素，再将已展开的ul元素隐藏，这样就完成了手风琴效果。
手风琴效果如果有不完善的地方，希望各位JS/JQ大神多多指教，大家共同学习，送上Demo下载。
文章可随意转载，转载请注明出处(http://www.cnblogs.com/yy981420974/p/5891918.html)。