JQ 实现菜单伸缩

html 

<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录1<i></i></a> 

                        <ul class="level2">
                            <li><a>&nbsp;&nbsp;1</a></li>
                            <li><a>&nbsp;&nbsp;2</a></li>
                            <li><a>&nbsp;&nbsp;3</a></li>
                            <li><a>&nbsp;&nbsp;4</a></li>
                        </ul>

</li>

<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录2<i></i></a> 

                        <ul class="level2">
                            <li><a>&nbsp;&nbsp;1</a></li>
                            <li><a>&nbsp;&nbsp;2</a></li>
                            <li><a>&nbsp;&nbsp;3</a></li>
                            <li><a&nbsp;&nbsp;4</a></li>
                        </ul>

</li>

<li class="level1"><a style="color:#56B6E8; font-weight:900;">目录3<i></i></a> 

                        <ul class="level2">
                            <li><a>&nbsp;&nbsp;1</a></li>
                            <li><a>&nbsp;&nbsp;2</a></li>
                            <li><a>&nbsp;&nbsp;3</a></li>
                            <li><a>&nbsp;&nbsp;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收缩
        }
    });