用JS做的简单的可折叠的两级树形菜单

142 阅读 0 评论 94 点赞

我是靠谱客的博主大胆洋葱，最近开发中收集的这篇文章主要介绍用JS做的简单的可折叠的两级树形菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<hrad> 
<metahttp-equiv="content-type"content="text/html;charset=utf-8"> 
<title>可折叠的两级菜单</title> 
<styletype="text/css"> 
<!-- 
body{ 
background-color:#ffdee0; 
} 
#navigation { 
width:200px; 
font-family:Arial; 
} 
#navigation > ul { 
list-style-type:none; 
margin:0px; 
padding:0px; 
} 
#navigation > ul >li { 
border-bottom:1pxsolid #ED9F9F; 
} 
#navigation > ul >li > a{ 
display:block; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #711515; 
} 
#navigation > ul >li > a:link, #navigation >ul >li > a:visited{ 
background-color:#c11136; 
color:#FFFFFF; 
} 
#navigation > ul >li > a:hover{ 
background-color:#990020; 
color:#ffff00; 
} 
.txt{ 
background-color:#c11136; 
color:#FFFFFF; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #711515; 
} 

/* 子菜单的CSS样式 */ 
#navigation ul li ul{ 
list-style-type:none; 
margin:0px; 
padding:0px0px 0px 0px; 
} 
#navigation ul li ulli{ 
border-top:1pxsolid #ED9F9F; 
} 
#navigation ul li ulli a{ 
display:block; 
padding:3px3px 3px 0.5em; 
text-decoration:none; 
border-left:28pxsolid #a71f1f; 
border-right:1pxsolid #711515; 
} 
#navigation ul li ulli a:link, #navigationul li ul lia:visited{ 
background-color:#e85070; 
color:#FFFFFF; 
} 
#navigation ul li ulli a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
} 
#navigation ul li ul.myHide{ /* 隐藏子菜单 */ 
display:none; 
} 
#navigation ul li ul.myShow{ /* 显示子菜单 */ 
display:block; 
} 
--> 
</style> 
<scriptlanguage="javascript"> 
window.onload=function(){ 
varlistUL=document.getElementById("listUL"); 
varolist=listUL.childNodes; 
varoa=0; 
for(var i = 0; i < olist.length; i++) { 
if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){ 
oa=olist[i]; 
oa.onclick=change; 
} 

} 
functionchange(){ 
varos=this.getElementsByTagName("ul")[0]; 
if(os.className=="myHide") 
os.className="myShow"; 
else 
os.className="myHide"; 
} 
} 
</script> 
</hrad> 
<body> 
<divid="navigation"> 
<ulid="listUL"> 
<li> 
<divclass="txt">Home</div> 
</li> 
<li> 
<divclass="txt">news</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">sports</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">weather</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html> 