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

2021-07-01 00:13

阅读：583

标签：row href item icon 展开 css htm .com ack

技术分享

html:

class="col-sm-3 col-md-2 sidebar">
    class="totalt">系统管理系统
    class="menu">
        class="title">

            class="item item1">class="glyphicon glyphicon-chevron-down myarrow ">账号管理
            


            class="content">
                 class="item item2"  href="right5.html" target="right" >class="glyphicon glyphicon-step-backward ">账号管理
                
                

                  class="item item2" href="right.html" target="right">class="glyphicon glyphicon-step-backward ">账号管理
                

                 class="item item2" href="right2.html" target="right">class="glyphicon glyphicon-step-backward ">账号管理
                


            

        class="title ">

            class=" item item1">class="glyphicon glyphicon-chevron-down myarrow ">账号管理
            

            class="content">
                 class="item item2" href="#" >class="glyphicon glyphicon-step-backward ">账号管理
                
                

                 class="item item2" href="#">class="glyphicon glyphicon-step-backward ">账号管理
                

                 class="item item2" href="#">class="glyphicon glyphicon-step-backward ">账号管理
                


            


        class="title">

            class="item item1">class="glyphicon glyphicon-chevron-down myarrow ">账号管理
            

            class="content">
                
                    class="item item2" href="#" >
                        class="glyphicon glyphicon-step-backward ">账号管理
                    
                

                  class="item item2" href="#" >class="glyphicon glyphicon-step-backward ">账号管理
                

                 class="item item2" href="#" >class="glyphicon glyphicon-step-backward ">账号管理

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实现后台系统左侧菜单的点击展开/收缩二级菜单效果

标签：row href item icon 展开 css htm .com ack

原文地址：http://www.cnblogs.com/iriliguo/p/7134393.html

上一篇：[BZOJ]1014 火星人prefix(JSOI2008)

下一篇：[Jinja2]本地加载html模板

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
文章链接：http://soscw.com/index.php/essay/100073.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章