用JavaScript创建可折叠导航菜单

By SoleilNeon in Techniques 2010-02-17

有时候为了避免页面上出现过多的元素可以将部分元素隐藏起来，等到需要的时候通过鼠标点击展开相应的元素。当导航菜单项目过多的时候就可以采用这种方法。

首先，需要创建HTML列表，代码如下：

Links

接着在HTML页面的<head>和</head>标签之间添加下面的JavaScript代码，原理是通过切换元素的css的display属性来控制显示或隐藏。

function collapse(zap){
	if(document.getElementById){
		var abra=document.getElementById(zap).style;
		if(abra.display=="block"){
			abra.display="none";
		}else{
			abra.display="block";
		}
		return false;
	}else{
		return true;
	}
}

最后把给标题添加a元素，添加onclick事件，当点击鼠标的时候就是触发事件，调用定义好的函数：

Links

这样就完成了简单的可折叠菜单，可以自己添加相应的CSS样式。