IT工程師數位筆記本

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

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