左侧菜单栏折叠展开效果-超级简单

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

    
    



    

        

            首页
        
        

            菜单1
            

                

                    子菜单1-1
                
                

                    子菜单1-2
                
                

                    子菜单1-3
                
                

                    子菜单1-4
                
            
        
        

            菜单2
            

                

                    子菜单2-1
                
                

                    子菜单2-2
                
                

                    子菜单2-3
                
            
        
        

            菜单3
            

                

                    子菜单3-1
                
                

                    子菜单3-2
                
            
        
    

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

        $(".menu-list .first-menu").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(this).find("ul").slideToggle(500);
            $(this).siblings().find("ul").hide();
        })

五：给二级菜单绑定事件，点击时加入选中的深色背景

      $(".menu-list .second-menu").click(function(){
            var $this = $(this);
            $(".second-menu").each(function () {
                if($(this).hasClass("current")){
                    $(this).removeClass("current");
                }
            })
            $this.addClass("current").siblings().removeClass("current");
        })

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

        //  阻止事件冒泡
        $(".menu-list .first-menu ul").bind("click",function(event){
            event.stopPropagation();
        });

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流