JQ 实现菜单伸缩
html
<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录1<i></i></a>
<ul class="level2">
<li><a> 1</a></li>
<li><a> 2</a></li>
<li><a> 3</a></li>
<li><a> 4</a></li>
</ul>
</li>
<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录2<i></i></a>
<ul class="level2">
<li><a> 1</a></li>
<li><a> 2</a></li>
<li><a> 3</a></li>
<li><a 4</a></li>
</ul>
</li>
<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录3<i></i></a>
<ul class="level2">
<li><a> 1</a></li>
<li><a> 2</a></li>
<li><a> 3</a></li>
<li><a> 4</a></li>
</ul>
</li>
js
// level 伸缩
$('.level1 a').click(function () {
if ($(this).parent().find('.level2').is(':visible')) { //判断点击的level2是否可见，可见则收缩
$(this).parent().find('.level2').slideUp("slow");
}else{
$(this).parent().find('.level2').slideDown("slow"); //若level2不可见则伸展
$(this).parent().siblings().find('.level2').slideUp("slow"); //level1所有兄弟节点下的level2收缩
}
});