js树型菜单的实现原理

来源：互联网发布：mac youtube翻墙编辑：程序博客网时间：2024/05/15 22:11

树型菜单是一种很常见的用户输入界面，很多应用中都很常用。这种菜单有很多优点，例如层次结构清晰。本文就如何用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>