jquery實現后台系統左側菜單的點擊展開/收縮二級菜單效果

html:

<div class="col-sm-3 col-md-2 sidebar">
    <div class="totalt"><a>系統管理系統</a></div>
    <ul class="menu">
        <li class="title">

            <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>賬號管理
            </a>


            <ul class="content">
                <li> <a class="item item2"  href="right5.html" target="right" ><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a>
                </li>
                <li>  <a class="item item2" href="right.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>
                <li> <a class="item item2" href="right2.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>

            </ul>
        </li>
        <li class="title ">

            <a class=" item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>賬號管理
            </a>

            <ul class="content">
                <li> <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a>
                </li>
                <li> <a class="item item2" href="#"><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>
                <li> <a class="item item2" href="#"><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>

            </ul>
        </li>

        <li class="title">

            <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>賬號管理
            </a>

            <ul class="content">
                <li>
                    <a class="item item2" href="#" >
                        <span class="glyphicon glyphicon-step-backward "></span>賬號管理
                    </a>
                </li>
                <li>  <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>
                <li> <a class="item item2" href="#" ><span class="glyphicon glyphicon-step-backward "></span>賬號管理
                </a></li>

            </ul>
        </li>

    </ul>

</div>

js:

$(".title .item1").click(function(){
    $(this).next(".content").slideToggle();//實現二級菜單的展開收縮功能
    $(this).find("span").toggleClass("glyphicon glyphicon-chevron-down");//實現菜單點擊時圖標的轉換效果
    $(this).find("span").toggleClass("glyphicon glyphicon-chevron-right");
})

css就不貼了，用jquery實現這種豎直手風琴菜單真的容易好多。