树形菜单的一个简单实现

树形菜单实现很简单，div的id设置为MenuRoot，所有的父菜单的name用menuname就可以了。默认全部菜单都是关闭的，用showcategory来显示当前选中的菜单。

< html >
< head >
< meta http-equiv ="content-Type" content ="text/html;charset=gb2312" >
</head>
< body >
< script language ="javascript" >
function initializeMenu(menuName) {
  var    menu= document.getElementsByName(menuName);
  var k,i,len,tablelen;
  for     ( k=0,tablelen=menu.length; k <tablelen;     k++)        
  {
    var actuator=menu[k];
    actuator.onclick = function() {
                var display = this.nextSibling.nextSibling.style.display;
    if (display == "none")
      this.nextSibling.nextSibling.style.display = "block";
    else
      this.nextSibling.nextSibling.style.display = "none";
                return false;}
        }
}
function showcategory(menuID)
{
  var menu=document.getElementById(menuID);
  //menu.className="";
  while (menu.parentElement.id!="MenuRoot")
  {    
    if (menu.tagName=="UL" && menu.style.display=='none')
    {
      menu.style.display="block";
      //menu.className="";
    }
    menu=menu.parentElement;
  }
}
window.onload = function() {
     initializeMenu("menuname");
}
</script>
< div id ="MenuRoot" >
     < ul >
         < li > < a href ="#" name ="menuname" id ="1" >顶级菜单1 </a>
             < ul style ="display:none" >
                 < li > < a href ="#" name ="menuname" id ="2" >第一级菜单 </a>
     < ul style ="display:none" >
                         < li > < a href ="#" id ="3" >第二级菜单3 </a> </li>
                         < li > < a href ="#" id ="4" >第二级菜单4 </a> </li>
                         < li > < a href ="#" id ="5" >第二级菜单5 </a> </li>
                     </ul>
     </li>    
                 < li > < a href ="#" name ="menuname" id ="6" >第一级菜单 </a>
     < ul style ="display:none" >
                         < li > < a href ="#" id ="7" >第二级菜单7 </a> </li>
                         < li > < a href ="#" id ="8" >第二级菜单8 </a> </li>
                         < li > < a href ="#" id ="9" >第二级菜单9 </a> </li>
                     </ul> </li>
                 < li > < a href ="#" name ="menuname" id ="10" >第一级菜单 </a>
                     < ul style ="display:none" >
                         < li > < a href ="#" id ="11" >第二级菜单11 </a> </li>
                         < li > < a href ="#" id ="12" >第二级菜单12 </a> </li>
                         < li > < a href ="#" id ="13" >第二级菜单13 </a> </li>
                     </ul>
                 </li>
             </ul>
         </li>
   < li > < a href ="#" name ="menuname" id ="14" >顶级菜单2 </a> </li>
   < li > < a href ="#" name ="menuname" id ="15" >顶级菜单3 </a> </li>
   < li > < a href ="#" name ="menuname" id ="16" >顶级菜单4 </a> </li>
   < li > < a href ="#" name ="menuname" id ="17" >顶级菜单5 </a> </li>
     </ul>
</div>
< script >showcategory("12"); </script>
</body>
</html>