由于项目中子页面需要一个小菜单，找一个菜单插件太大材小用，又怕和当前项目中的菜单不兼容，所以动手自己写了一个，我取名为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演示：

MINIMenu

转载请注明：左手代码右手诗 » 基于Jquery写的一个手风琴效果的折叠菜单

~谢谢打赏~

赏