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

一：页面结构：

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

*{

margin: 0;

padding: 0;

box-sizing: border-box;

-webkit-box-sizing: border-box;

}

html,body{

height: 100%;

}

.menu-list{

height: 100%;

padding-top:20px;

font-size:18px;

background-color: #2e3254;

}

.menu-list ul{

list-style: none;

padding:0;

margin:0 auto;

}

.menu-list ul li{

text-align:left;

color: #616c82;

}

.menu-list ul li.first-menu{

overflow: hidden;

}

.menu-list ul li:HOVER>a{

color: #007FC8;

}

.menu-list ul li a{

display:block;

padding:16px 0;

color: #5f78a2;

text-decoration:none;

}

.menu-list ul li.first-menu>a{

padding-left: 15px;

}

.menu-list ul li.first-menu.active>a{

color: #1c9dff;

vertical-align: middle;

}

.menu-list ul li.first-menu.active ul li.second-menu.current a{

background-color: #4d527c;

font-size: 18px;

}

.menu-list ul li.first-menu ul{

display:none;

}

.menu-list ul li.first-menu ul li.second-menu a{

padding: 12px 0 12px 31px;

font-size:16px;

color: #8aa3cd;

}

三：引入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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流