有时候为了避免页面上出现过多的元素可以将部分元素隐藏起来，等到需要的时候通过鼠标点击展开相应的元素。当导航菜单项目过多的时候就可以采用这种方法。
首先，需要创建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样式。
