用JavaScript创建可折叠导航菜单

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

首先,需要创建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样式。