js树型菜单的实现原理-爱代码爱编程
树型菜单是一种很常见的用户输入界面，很多应用中都很常用。这种菜单有很多优点，例如层次结构清晰。本文就如何用JavaScript编写树型菜单作讨论。用JavaScript来编写的基本原理是通过Html的DIV标签+Css来控制每一层的可见或隐藏。
通过Div标签，可以控制每层的隐藏或可见。但不同的浏览器，支持的CSS不同，具体的语法也不同。对于IE浏览器，可以通过 *.style.display = "block"|"none"来控制。
例如
<html>
<head>
<script>
with (document) {
write("<STYLE TYPE=''text/css''>");
if (document.layers) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}else if(document.all) {
write(".child {display:none}")
}
write("</STYLE>");
}
function expandIt(el) {
if (document.all) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}else {
whichEl.style.display = "none";
}
}else if(document.layers){
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}else {
whichEl.visibility = "hide";
}
arrange();
}
}
function click1(){
alert("click");
}
</script>
</head>
<body>
<div id="KBParent1">
<a href="#" onClick="expandIt('KB1'); return false">点击</a>
</div>
<div id="KB1Child" class="child" style="width: 128; height: 64"> <a href="sample.htm" target="_blank">页面一</a><br>
<a href="sample.htm" target="_blank">页面二</a><br>
<a href="sample.htm" target="_blank">页面三</a>
</div>
<div id="KBParent2">
<a href="#" onClick="expandIt('KB2'); return false">点击</a>
</div>
<div id="KB2Child" class="child" style="width: 128; height: 64"> <a href="sample.htm" target="_blank">页面一</a><br>
<a href="sample.htm" target="_blank">页面二</a><br>
<a href="sample.htm" target="_blank">页面三</a>
</div>
</body>
</html>