首页 > 代码库 > jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

2024-10-18 20:50:01   213人阅读

技术分享

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=http://www.mamicode.com/"right5.html" target="right" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                </a>
                </li>
                <li>  <a class="item item2" href=http://www.mamicode.com/"right.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                </a></li>
                <li> <a class="item item2" href=http://www.mamicode.com/"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=http://www.mamicode.com/"#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                </a>
                </li>
                <li> <a class="item item2" href=http://www.mamicode.com/"#"><span class="glyphicon glyphicon-step-backward "></span>账号管理
                </a></li>
                <li> <a class="item item2" href=http://www.mamicode.com/"#"><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=http://www.mamicode.com/"#" >
                        <span class="glyphicon glyphicon-step-backward "></span>账号管理
                    </a>
                </li>
                <li>  <a class="item item2" href=http://www.mamicode.com/"#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理
                </a></li>
                <li> <a class="item item2" href=http://www.mamicode.com/"#" ><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实现这种竖直手风琴菜单真的容易好多。

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果


联系
我们