由于项目中子页面需要一个小菜单，找一个菜单插件太大材小用，又怕和当前项目中的菜单不兼容，所以动手自己写了一个，我取名为MINIMenu，因为只有几十行代码。。。
HTML代码
<div id="menu">
<div class="menu-item">
<div class="item-title">
<a class="active" href="#">菜单一</a></div>
<ul class="item-ul">
<li><span>|--</span><a href="#">模块1</a></li>
<li><span>|--</span><a href="#">模块2</a></li>
<li><span>|--</span><a href="#">模块3</a></li>
<li><span>|--</span><a href="#">模块4</a></li>
</ul>
</div>
<div class="menu-item">
<div class="item-title"><a href="#">菜单二</a></div>
<ul class="item-ul">
<li><span>|--</span><a href="#">模块1</a></li>
<li><span>|--</span><a href="#">模块2</a></li>
</ul>
</div>
<div class="menu-item">
<div class="item-title">
<a href="#">菜单三</a>
</div>
</div>
</div>
Javascript代码
依赖jquery : <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
/*
* 初始化菜单状态，将所有class包含open的项目显示出来
*/
function MINIMenus(settings){
//默认参数
var defaultSetting = {
animation:"slide", // 设置折叠动画：none 无动画;slide 滑动; fade 淡入淡出
mutex:true, // true(互斥，菜单只能有一个展开),false(不互斥，每个菜单都能展开)
meunId:"#menu",
} ;
$.extend(defaultSetting,settings);
initMenus(defaultSetting.meunId);
bindMenus(defaultSetting.meunId,defaultSetting.mutex,defaultSetting.animation);
}
/**
* [initMenus 初始化菜单，展开所有open的项目]
*
*/
function initMenus(menuID){
$(menuID).find(".item-ul").each(function(){
if($(this).parent().hasClass("open")){
$(this).find("li").show();
}else{
$(this).find("li").hide();
}
});
}
/*
* 绑定点击事件
*/
function bindMenus(menuID,mutex,animation){
$(menuID).find(".item-title").bind("click",function(){
var item=$(this).parent();
listSize = (item.find(".item-ul li")).length;
//判断是否有展开项
if(listSize>0){
if(item.hasClass("open")){
hideItem($(this).next(),animation);
hideAllItems(menuID,mutex,animation);
if(!mutex){
item.removeClass("open");
}
}else{
hideAllItems(menuID,mutex,animation);
showItem($(this).next(),animation);
item.addClass("open");
}
}
});
}
/*
* 折叠所有已展开菜单项
*/
function hideAllItems(menuID,mutex,animation){
if(mutex){
$(menuID).find(".menu-item").each(function(){
if($(this).hasClass("open")){
hideItem($(this).find(".item-ul"),animation);
$(this).removeClass("open");
}
});
}
}
/*
* 折叠指定.item-ul下的li元素
*/
function hideItem(item,animation){
item.find("li").each(function(){
switch(animation){
case "slide":
$(this).slideUp();
break;
case "fade":
$(this).fadeOut();
break;
default:
$(this).hide();
break;
}
})
}
/*
* 展开指定.item-ul下的li元素
*/
function showItem(item,animation){
item.find("li").each(function(){
switch(animation){
case "slide":
$(this).slideDown();
break;
case "fade":
$(this).fadeIn();
break;
default:
$(this).show();
break;
}
})
}
CSS样式
ul{
list-style: none;
padding:0;
margin: 0;
}
#menu{
max-width:14%;
min-height: 500px;
color:#333;
background: #fff;
margin-right:8px;
}
#menu .active{
background: #5eb95e;
color: #fff;
}
.menu-item{
text-align: center;
width: 100%;
cursor: pointer;
margin-bottom:8px;
}
.menu-item a{
padding: 6px 0;
border-top: 1px solid #eee;
background:#e8e8e8;
border-radius: 6px;
display: block;
color:#333;
text-decoration: none;
}
.menu-item a:hover,.menu-item .item-ul a:hover{
background: #5eb95e;
color: #fff;
}
.menu-item .item-ul{
margin-top: 8px;
}
.menu-item .item-ul li{
margin: 5px 0;
}
.menu-item .item-ul span{
display: inline-block;
width: 20%;
}
.menu-item .item-ul a{
display: inline-block;
padding: 5px 0;
background: #e8e8e8;
text-decoration: none;
color: #333;
width: 80%;
border-radius: 5px;
}
.item{
margin-bottom:8px;
}
使用
使用 new MINIMenus({}); 初始化即可
默认参数：
var defaultSetting = {
animation:"slide", // 设置折叠动画：none 无动画;slide 滑动; fade 淡入淡出
mutex:true, // true(互斥，菜单只能有一个展开),false(不互斥，每个菜单都能展开)
meunId:"#menu", //菜单所在的ID
} ;
在.menu-item 加上class='open' 将展开该菜单下的所有子菜单
在 a标签加上class='active' 显示被选中的效果
$(document).ready(function(){
new MINIMenus({
mutex:false,
});
});
效 果
demo演示：
转载请注明：左手代码右手诗 » 基于Jquery写的一个手风琴效果的折叠菜单
