JavaScript+CSS无限极分类效果完整实现方法
本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考，具体如下：
CSS样式：
a{text-decoration:none;}
a,a:visited{color:#000;background:inherit;}
body{margin:0;padding:20px;font:12pxtahoma,宋体,sans-serif;}
dt{font-size:22px;font-weight:bold;margin:00015px;}
dd{margin:00015px;}
h4{margin:0;padding:0;font-size:18px;text-align:center;}
p{margin:0;padding:00018px;}
pa,pa:visited{color:#00f;background:inherit;}
/*CNLTreeMenuStart*/
.CNLTreeMenuimg.s{cursor:pointer;vertical-align:middle;}
.CNLTreeMenuul{padding:0;}
.CNLTreeMenuli{list-style:none;padding:0;}
.Closedul{display:none;}
.Childimg.s{background:none;cursor:default;}
#CNLTreeMenu1ul{margin:00017px;}
#CNLTreeMenu1img.s{width:20px;height:15px;}
#CNLTreeMenu1.Openedimg.s{background:url(skin1/opened.gif)no-repeat00;}
#CNLTreeMenu1.Closedimg.s{background:url(skin1/closed.gif)no-repeat00;}
#CNLTreeMenu1.Childimg.s{background:url(skin1/child.gif)no-repeat3px5px;}
#CNLTreeMenu2ul{margin:00017px;}
#CNLTreeMenu2img.s{width:17px;height:15px;}
#CNLTreeMenu2.Openedimg.s{background:url(skin2/opened.gif)no-repeat4px6px;}
#CNLTreeMenu2.Closedimg.s{background:url(skin2/closed.gif)no-repeat3px6px;}
#CNLTreeMenu2.Childimg.s{background:url(skin2/child.gif)no-repeat3px5px;}
#CNLTreeMenu3ul{margin:00017px;}
#CNLTreeMenu3img.s{width:34px;height:18px;}
#CNLTreeMenu3.Openedimg.s{background:url(skin3/opened.gif)no-repeat01px;}
#CNLTreeMenu3.Closedimg.s{background:url(skin3/closed.gif)no-repeat01px;}
#CNLTreeMenu3.Childimg.s{background:url(skin3/child.gif)no-repeat13px2px;}
/*CNLTreeMenuEnd*/
/*TempCSSforViewDemo*/
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3{float:left;width:249px;border:1pxsolid#99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu1,#CNLTreeMenu2{padding-bottom:15px;}
.ViewCode{
clear:both;
border:1pxsolid#FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;
}
.ViewCodeh6{color:#00f;}
JavaScript代码：
functionOb(o){
varo=document.getElementById(o)?document.getElementById(o):o;
returno;
}
functionHd(o){
Ob(o).style.display="none";
}
functionSw(o){
Ob(o).style.display="";
}
functionExCls(o,a,b,n){
varo=Ob(o);
for(i=0;i<n;i++){o=o.parentNode;}
o.className=o.className==a?b:a;
}
functionCNLTreeMenu(id,TagName0){
this.id=id;
this.TagName0=TagName0==""?"li":TagName0;
this.AllNodes=Ob(this.id).getElementsByTagName(TagName0);
this.InitCss=function(ClassName0,ClassName1,ClassName2,ImgUrl){
this.ClassName0=ClassName0;
this.ClassName1=ClassName1;
this.ClassName2=ClassName2;
this.ImgUrl=ImgUrl||"css/s.gif";
this.ImgBlankA="<imgsrc=\""+this.ImgUrl+"\"class=\"s\"onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\"alt=\"展开/折叠\"/>";
this.ImgBlankB="<imgsrc=\""+this.ImgUrl+"\"class=\"s\"/>";
for(i=0;i<this.AllNodes.length;i++){
this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
}
}
this.SetNodes=function(n){
varsClsName=n==0?this.ClassName0:this.ClassName1;
for(i=0;i<this.AllNodes.length;i++){
this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
}
}
}
HTML页面：
<!--CNLTreeMenuStart:-->
<divclass="CNLTreeMenu"id="CNLTreeMenu1">
<h4>CNLTreeMenu1</h4>
<p><aid="AllOpen_1"href="#"onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><aid="AllClose_1"href="#"onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');"style="display:none;">全部折叠</a></p>
<ul>
<liclass="Opened"><ahref="https://www.nhooo.com">JB51.Net</a>
<ul>
<li><ahref="#1">技术区</a>
<ul>
<li><ahref="#">网页技术</a>
<ul>
<liclass="Child"><ahref="#">JavaScript</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">HTML/XHTML/CSS</a></li>
<liclass="Child"><ahref="#">Ajax</a></li>
<liclass="Child"><ahref="#">网页制作工具</a></li>
<liclass="Child"><ahref="#">设计/图形</a></li>
<liclass="Child"><ahref="#">Flash/多媒体</a></li>
<liclass="Child"><ahref="#">VML/Web3D</a></li>
</ul></li><!--SubNode3-->
<li><ahref="#">Web编程</a>
<ul>
<liclass="Child"><ahref="#">Java</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">.Net</a></li>
<liclass="Child"><ahref="#">ASP/VBScript</a></li>
<liclass="Child"><ahref="#">PHP</a></li>
<liclass="Child"><ahref="#">Perl/Python</a></li>
<liclass="Child"><ahref="#">Web综合/开源</a></li>
</ul></li><!--SubNode3-->
<li><ahref="#">数据库</a>
<ul>
<liclass="Child"><ahref="#">Access/SQLServer</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">MySQL/PostgreSQL</a></li>
<liclass="Child"><ahref="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--SubNode3-->
<li><ahref="#">服务器</a>
<ul>
<liclass="Child"><ahref="#">Windows/IIS</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">Unix/Linux/Apache</a></li>
<liclass="Child"><ahref="#">应用服务器</a></li>
</ul></li><!--SubNode3-->
</ul></li><!--SubNode2-->
<li><ahref="#1">二级目录</a>
<ul>
<li><ahref="#">三级目录</a>
<ul>
<li><ahref="#">四级目录</a>
<ul>
<li><ahref="#">五级目录</a>
<ul>
<li><ahref="#"></a>
<ul>
<li><ahref="#">第n级目录</a>
<ul>
<liclass="Child"><ahref="#">叶结点1</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">叶结点2</a></li>
<liclass="Child"><ahref="#">叶结点3</a></li>
</ul></li><!--SubNoden-->
</ul></li><!--SubNode6-->
</ul></li><!--SubNode5-->
</ul></li><!--SubNode4-->
</ul></li><!--SubNode3-->
</ul></li><!--SubNode2-->
<li><ahref="#1">二级目录</a>
<ul>
<li><ahref="#">三级目录</a>
<ul>
<li><ahref="#">四级目录</a>
<ul>
<li><ahref="#">五级目录</a>
<ul>
<li><ahref="#"></a>
<ul>
<li><ahref="#">第n级目录</a>
<ul>
<liclass="Child"><ahref="#">叶结点1</a></li><!--ChildNode-->
<liclass="Child"><ahref="#">叶结点2</a></li>
<liclass="Child"><ahref="#">叶结点3</a></li>
</ul></li><!--SubNoden-->
</ul></li><!--SubNode6-->
</ul></li><!--SubNode5-->
</ul></li><!--SubNode4-->
</ul></li><!--SubNode3-->
</ul></li><!--SubNode2-->
</ul></li><!--SubNode1-->
</ul>
</div><!--CNLTreeMenu-->
<!--CNLTreeMenu1End!-->
希望本文所述对大家JavaScript程序设计有所帮助。