之前分享過《jQuery 鼠標點擊展開/顯示和收縮/隱藏導航菜單（子菜單）》
特點是：展開分類后，點擊另一菜單，之前的菜單也不會關閉，而本文要分享的是如下圖，鼠標點擊展開子菜單的時候，另一個主菜單會自動關閉，僅保持一個主菜單展開狀態！
如上圖，本文分享的就是關于jquery + easing.js實現抽屜式的展開收縮、顯示隱藏子菜單的效果：
重點：切換的時候，一個主菜單展開會關閉和隱藏另一個菜單下的子菜單
這種特效非常適合用于各種網站的菜單中，特別是側欄菜單，適合子菜單比較多時使用！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樹型菜單</title>
<style>
/*
author :前端一枚 努力學習中 qq：815183231;
*/
/*簡單粗暴重置默認樣式===============================*/
*{ margin: 0; padding: 0; }
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}
.treebox{ width: 200px; margin: 0 auto; background-color:#1a6cb9; }
.menu{ overflow: hidden; border-color: #ddd; border-style: solid ; border-width: 0 1px 1px ; }
/*第一層*/
.menu li.level1>a{
display:block;
height: 45px;
line-height: 45px;
color: #fff;
padding-left: 50px;
border-bottom: 1px solid #000;
font-size: 16px;
position: relative;
}
.menu li.level1 a:hover{ text-decoration: none;background-color:#326ea5; }
.menu li.level1 a.current{ background: #0f4679; }
/*============修飾圖標*/
.ico{ width: 20px; height: 20px; display:block; position: absolute; left: 20px; top: 10px; background-repeat: no-repeat; background-image: url(images/ico1.png); }
/*============小箭頭*/
.level1 i{ width: 20px; height: 10px; background-image:url(images/arrow.png); background-repeat: no-repeat; display: block; position: absolute; right: 20px; top: 20px; }
.level1 i.down{ background-position: 0 -10px; }
.ico1{ background-position: 0 0; }
.ico2{ background-position: 0 -20px; }
.ico3{ background-position: 0 -40px; }
.ico4{ background-position: 0 -60px; }
.ico5{ background-position: 0 -80px; }
/*第二層*/
.menu li ul{ overflow: hidden; }
.menu li ul.level2{ display: none;background: #0f4679; }
.menu li ul.level2 li a{
display: block;
height: 45px;
line-height: 45px;
color: #fff;
text-indent: 60px;
/*border-bottom: 1px solid #ddd; */
font-size: 14px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#none"><em class="ico ico1"></em>導航一<i></i></a>
<ul>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
</ul>
</li>
<li>
<a href="#none"><em class="ico ico2"></em>導航一<i></i></a>
<ul>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
</ul>
</li>
<li>
<a href="#none"><em class="ico ico3"></em>導航一<i></i></a>
<ul>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
</ul>
</li>
<li>
<a href="#none"><em class="ico ico4"></em>導航一<i></i></a>
<ul>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
</ul>
</li>
<li>
<a href="#none"><em class="ico ico5"></em>導航一<i></i></a>
<ul>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
<li><a href="javascript:;">導航選項</a></li>
</ul>
</li>
</ul>
</div>
<!-- 引入 jQuery -->
<script src="scripts/jquery1.8.3.min.js" type="text/javascript"></script>
<script src="scripts/easing.js"></script>
<script>
//等待dom元素加載完畢.
$(function(){
$(".treebox .level1>a").click(function(){
$(this).addClass('current') //給當前元素添加"current"樣式
.find('i').addClass('down') //小箭頭向下樣式
.parent().next().slideDown('slow','easeOutQuad') //下一個元素顯示
.parent().siblings().children('a').removeClass('current')//父元素的兄弟元素的子元素去除"current"樣式
.find('i').removeClass('down').parent().next().slideUp('slow','easeOutQuad');//隱藏
return false; //阻止默認時間
});
})
</script>
</body>
</html>