JS实现网页动态折叠菜单

最近做了一个多级菜单列表动态展示的功能，其中用到了vue.js渐进式框架、aui.css等，在此记录一下，也便于自己日后总结。

说明：vue.js不是必须要用的，因为我们项目中页面用的都是vue，因此我才用的vue方式进行数据绑定，也可以用其他方式实现。

方式一源码：

	
		
		
		
		
		
		
		
	
	
		

			

				

					
信息公开
				
				

					

						{{item.name}}
					
					

						

							

								{{childnode.name}}
							
							

								

									

										
									
									

										{{finalnode.name}}
									
								
							
						
					
				
			
		
	
	
	
	
	
	

效果图：

方式二：

分级加载菜单列表信息。各级的菜单信息并不是一次性全部加载完成，而是当点击一级菜单时，再加载被点击菜单对应的二级菜单信息，以此类推。这样做效率貌似会高点，毕竟不是每个人都需要把所有的菜单都点一遍的。与方式一相比的话，需要注意2点（方式二就不贴源码了，其实和方式一差不多，这里简单谈下思路）

第一：动态效果是JS通过dom控制的，所以在调用dom元素之前必须给对应的菜单列表进行赋值。因为第一种方式是一次性加载所有菜单信息，加载的时候整个dom树的结构已经形成，这种容易控制。但是第二种方式dom树结构是一级接着一级加载的，想要通过dom控制元素，前提是dom树中需要存在这个元素

第二：各级列表需要一个临时容器来存放需要展示的数据，比如我点了一级列表菜单后，后台会调用方法返回一级列表对应的二级列表菜单信息，我把返回的信息保存在我预先设置好的临时容器中，然后再展示到前台页面（也就是通过v-for循环遍历到div中）
我是这样做的：

 vm_dataList = new Vue({
        el : '#menu',
        data : {
            list : [],
            list2 : [],
            list3 : [],
            list4 : []
        },
        methods : {
            toShow : toShow
        }
    })

ps:其实2种方式JS控制展示闭合的那段代码toShow()基本不用动，方式二的话就是再方式一的基础上进行多次循环赋值就可以。其实一开始我用的是方式一，后来进行数据对接的时候发现接口方法是以方式二的方式进行返回数据的，无奈又在方式一的基础上改进成了方式二，在菜单数据量不大的前提下我还是感觉方式一比较好用。                       

dom中获得兄弟节点的2种方法对比：

（1）忽略换行，空格等空节点的方式：
- nextElementSibling 获取当前节点的下一个节点(获得下一个兄弟节点)
- previousElementSibling 获取当前节点的上一个节点
注意： IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie 中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。
（2）获取包含空节点的方式：
-nextSibling
-previousSibling 也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用

以上就是我做菜单动态展示的一些经验分享，如果有哪里说得不对的还请大家帮忙更正，多做总结，一起成长！

2017-09-15补充:

    今天根目录用户新增了一条记录后发现导航列表点击无效，然后我就开始找问题，最后发现外层多了一层循环，造成切换样式的方法被多次循环，从而影响了正常的样式赋予，以下是toShow1()方法更改后的源码：

function toShow1() {
	//获得当前对象的下一个兄弟节点（此方法忽略"换行"等空白节点）,得到需要显示/隐藏的UL对象
	var ul = thisobj.nextElementSibling;
	if (!ul) {
		return false;
	}
	//遍历触发事件(div)的父节点(UL)下的所有的LI标签
	for (var _li = thisobj.parentNode.parentNode.childNodes, n = -1, li; li = _li[++n]; ) {
		if (li.tagName == "LI") {
			for (var _ul = li.childNodes, t = -1, $ul; $ul = _ul[++t]; ) {
				switch($ul.tagName) {
					//遍历LI标签下的UL标签(实际需要展现/隐藏的UL对象)
					case "UL":
						//完成样式赋予,判断如果是触发事件的节点就完成样式切换,反之则设置其display样式为隐藏
						$ul.style.display = $ul != ul ? "none" : $ul.style.display == "block" ? "none" : "block";
						break;
					case "":
						$ul.style.display = $ul != thisobj ? "none" : thisobj.style.display == "block" ? "none" : "block";
						break;
				}
			}
		}
	}
}