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收缩

        }

    });