树形菜单实现很简单,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>
< 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>
转载于:https://blog.51cto.com/zombi/116744