特点是：展开分类后，点击另一菜单，之前的菜单也不会关闭，而本文要分享的是如下图，鼠标点击展开子菜单的时候，另一个主菜单会自动关闭，仅保持一个主菜单展开状态！
jquery 双击 事件，jquery 对象 下标，jquery获取键盘左右键，jquery combox 多选，jquery得到啊，jquery 姓名随机选择，jquery教程ppt，jquery延迟 刷新，jquery 注册新标签，jquery 双击 事件
如上图，本文分享的就是关于jquery + easing.js实现抽屉式的展开收缩、显示隐藏子菜单的效果：
重点：切换的时候，一个主菜单展开会关闭和隐藏另一个菜单下的子菜单
这种特效非常适合用于各种网站的菜单中，特别是侧栏菜单，适合子菜单比较多时使用！
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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:0auto;background-color:#1a6cb9;}
.menu{overflow:hidden;border-color:#ddd;border-style:solid;border-width:01px1px;}
/*第一层*/
.menuli.level1>a{
display:block;
height:45px;
line-height:45px;
color:#fff;
padding-left:50px;
border-bottom:1pxsolid#000;
font-size:16px;
position:relative;
}
.menuli.level1a:hover{text-decoration:none;background-color:#326ea5;}
.menuli.level1a.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);}
/*============小箭头*/
.level1i{width:20px;height:10px;background-image:url(images/arrow.png);background-repeat:no-repeat;display:block;position:absolute;right:20px;top:20px;}
.level1i.down{background-position:0-10px;}
.ico1{background-position:00;}
.ico2{background-position:0-20px;}
.ico3{background-position:0-40px;}
.ico4{background-position:0-60px;}
.ico5{background-position:0-80px;}
/*第二层*/
.menuliul{overflow:hidden;}
.menuliul.level2{display:none;background:#0f4679;}
.menuliul.level2lia{
display:block;
height:45px;
line-height:45px;
color:#fff;
text-indent:60px;
/*border-bottom:1pxsolid#ddd;*/
font-size:14px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<ahref="#none"><emclass="icoico1"></em>导航一<i></i></a>
<ul>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
</ul>
</li>
<li>
<ahref="#none"><emclass="icoico2"></em>导航一<i></i></a>
<ul>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
</ul>
</li>
<li>
<ahref="#none"><emclass="icoico3"></em>导航一<i></i></a>
<ul>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
</ul>
</li>
<li>
<ahref="#none"><emclass="icoico4"></em>导航一<i></i></a>
<ul>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
</ul>
</li>
<li>
<ahref="#none"><emclass="icoico5"></em>导航一<i></i></a>
<ul>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
<li><ahref="javascript:;">导航选项</a></li>
</ul>
</li>
</ul>
</div>
<!--引入jQuery-->
<scriptsrc="scripts/jquery1.8.3.min.js"type="text/javascript"></script>
<scriptsrc="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');//隐藏
returnfalse;//阻止默认时间
});
})
</script>
</body>
</html>