javabeen二级菜单加载页面 如何用js实现二级菜单

如何用JavaScript实现下面的二级菜单效果：

先分析一下整个效果实现的思路：

需求：

• 点击菜单打开菜单目录的同时关闭之前打开的菜单目录
• 关闭与打开菜单的时候都有动画过渡效果
  .

思路：

• 结合以上所述的两点，首先我们需要通过获取span来获取它的父级元素来进行一个类的切换，接下来可以用一个toggleClass()的方法进行切换类来控制菜单目录的打开与关闭；动画的过渡效果需要获取div菜单打开前以及打开后的高度，然后用一个move()来实现；不难发现我们可以将以上的过程通过一个function来进行封装 。

在实现效果之前我们的样式要写好，实现的关键就是在我们通过JS来进行类的切换div的ctr_style这个类来控制菜单的显示和关闭 ；

接下来我们需要获取到span来进行操作它的父级元素div:

var c_span = document.querySelectorAll(".c_span")

后面为了实现打开一个菜单的同时关闭之前打开的菜单的效果我们还需要定义一个变量来保存当前操作的div

var now_div = c_span[0].parentNode;

下面我们写一个切换菜单以及动画的过渡效果的function（这里引用了一个tools.js，里面封装了接下来需要用到的函数）:

function tog(obj){
	var begin = obj.offsetHeight;//获取开始时元素的高度
	toggleClass(obj , "ctr_style");//切换DIV的class，有则去掉，无则添加
	var end = obj.offsetHeight;//获取结束时元素的高度		
	obj.style.height = begin + "px";//用内联样式来控制当前div的高度
	move(obj,"height",end,20,function(){
				obj.style.height = "";//动画结束将内联样式去掉
				});
	}

到这里我们基本就完成了一大半了，接下来我们用for来操作每次点击的菜单:

for (var i = 0; i < c_span.length; i++) {  //操作每个当前点击的菜单
		c_span[i].onclick = function(){
		var parentDiv = this.parentNode;//获取span的父级元素DIV	
		tog(parentDiv);//打开当前点击的菜单
		tog(now_div);//关闭其他菜单		
		now_div = parentDiv;//每次循环结束将当前操作的菜单变为当前点击的菜单 
		};		
	}

到这里我们就完成了二级菜单的实现。

（源码已上传到GitHub：https://github.com/gzrdegithub/bokegit）