分享一個常見于管理后臺的左側(cè)菜單欄折疊展開的效果，基于jquery回梧，效果圖如下：
一：頁面結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="menu-list">
<ul>
<li class="first-menu">
<a href="javascript:;">首頁</a>
</li>
<li class="first-menu">
<a href="javascript:;">菜單1</a>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單1-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-2</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-3</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單1-4</a>
</li>
</ul>
</li>
<li class="first-menu">
<a href="javascript:;">菜單2</a>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單2-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單2-2</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單2-3</a>
</li>
</ul>
</li>
<li class="first-menu">
<a href="javascript:;">菜單3</a>
<ul>
<li class="second-menu">
<a href="javascript:;">子菜單3-1</a>
</li>
<li class="second-menu">
<a href="javascript:;">子菜單3-2</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
二：頁面樣式css盟广，放在head標(biāo)簽里
<style>
*{
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;
}
</style>
三：引入jquery文件
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
四：給一級菜單綁定點(diǎn)擊事件闷串，點(diǎn)擊時展開下面的子菜單
$(".menu-list .first-menu").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).find("ul").slideToggle(500);
$(this).siblings().find("ul").hide();
})
五：給二級菜單綁定事件，點(diǎn)擊時加入選中的深色背景
$(".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");
})
六：阻止二級菜單點(diǎn)擊發(fā)生冒泡筋量，當(dāng)點(diǎn)擊二級菜單的時候烹吵，一級菜單的事件也會發(fā)生，此時二級菜單會被收起桨武，因此需要阻止事件冒泡
// 阻止事件冒泡
$(".menu-list .first-menu ul").bind("click",function(event){
event.stopPropagation();
});
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚肋拔，愛閱讀，愛交友呀酸，將工作中遇到的問題記錄在這里凉蜂，希望給每一個看到的你能帶來一點(diǎn)幫助。
歡迎留言交流
