分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：
一：页面结构：
二：页面样式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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流