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