原生JS二级菜单实现（代码相当全）

一、写在前面

二级菜单源码

• 链接：https://pan.baidu.com/s/1pBdIdVHfcOcmngPxUavUoA
• 提取码：fdyt

里面有注释，可供学习，本文主要叙述，实现思路

二、二级菜单效果图及实现原理

效果图：

div的类属性为<div class=“collapsed”>
对应样式为

div.sdmenu div.collapsed {
	height: 25px;
}

最根本的原理：

• 二级菜单展开：当div有 class=“collapsed”，便有height:25px样式，二级菜单展开，没有则收缩。
• 通过对div类属性操作，即可实现二级菜单展开与收缩，对类属性操作，见这篇博客

三、实现代码

JS代码

<script type="text/javascript">
	window.onload = function(){
		
		/**
		 * 我们的每一个菜单都是一个div
		 * 	当div具有collapased这个类时，div就是折叠状态
		 *  当div没有这个类，div就是展开的状态
		 */
		
		/**
		 * 点击菜单，切换菜单的显示状态
		 *   
		 */
		//获取所有的class为menuSpande的元素,CSS选择器.是必须的
		var menuSpan = document.querySelectorAll(".menuSpan");
		
		//定义一个变量，来保存当前打开的菜单
		var opedDiv = menuSpan[0].parentNode;
		
		//为span绑定单击响应函数
		for(var i=0;i<menuSpan.length;i++){
			menuSpan[i].onclick = function(){
				
				//this代表当前点击的span
				//获取当前span的父元素
				var parentDiv = this.parentNode;
				
				//切换菜单的显示状态
				toggleMenu(parentDiv);
				
				//判断opedDiv和parentDiv是否相同
				if(opedDiv != parentDiv && !hasClass(opedDiv,"collapsed")){
					toggleMenu(opedDiv);
				}						
				//修改openDiv为当前打开的菜单
				opedDiv = parentDiv;
			}
		}
		
		/**
		 * 切换菜单折叠和显示状态
		 */
		function toggleMenu(obj){
			//在切换类之前，获取元素的高度
			var begin = obj.offsetHeight;
			//关闭parentDiv,相当于把collapsed样式加入到对象中
			toggleClass(obj,"collapsed");
			
			//在切换类之后获取一个高度
			var end = obj.offsetHeight;
			
			//动画效果就是将高度从begin向end过渡
			//将元素的高度重置为begin
			obj.style.height = begin + "px";
			//执行动画，从begin向end过渡
			move(obj,"height",end,10,function(){
				//动画执行完毕，删除内联样式
				obj.style.height="";
			});
		}
	}
</script>

toggleMenu()便是实现收缩及展开动画效果的函数，这个是核心部分，想要看源码，可以点击开头的链接