当前位置： 代码迷 >> Web前端 >> 惯用的三种树形菜单->很实用的
  详细解决方案

惯用的三种树形菜单->很实用的

热度：607   发布时间：2012-10-27 10:42:26.0
常用的三种树形菜单->很实用的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a {text-decoration:none;}
a,a:visited {color:#000;background:inherit;}
body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}
dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}
dd {margin:0 0 0 15px;}
h4 {margin:0;padding:0;font-size:18px;text-align:center;}
p {margin:0;padding:0 0 0 18px;}
p a,p a:visited {color:#00f;background:inherit;}
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}
.CNLTreeMenu ul {padding:0;}
.CNLTreeMenu li {list-style:none;padding:0;}
.Closed ul {display:none;}
.Child img.s {background:none;cursor:default;}
#CNLTreeMenu1 ul {margin:0 0 0 17px;}
#CNLTreeMenu1 img.s {width:20px;height:15px;}
#CNLTreeMenu1 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px;}
#CNLTreeMenu2 ul {margin:0 0 0 17px;}
#CNLTreeMenu2 img.s {width:17px;height:15px;}
#CNLTreeMenu2 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px;}
#CNLTreeMenu2 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px;}
#CNLTreeMenu2 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px;}
#CNLTreeMenu3 ul {margin:0 0 0 17px;}
#CNLTreeMenu3 img.s {width:34px;height:18px;}
#CNLTreeMenu3 .Opened img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Closed img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Child img.s {background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px;}
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;}
.ViewCode {clear:both;border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;}
.ViewCode h6 {color:#00f;}
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>

<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->



<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
<h4>CNL Tree Menu2</h4>
<p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->



<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
<h4>CNL Tree Menu3</h4>
<p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li>
<!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li>
<!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li>
<!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li>
<!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
<li><a href="#1">二级目录</a>
<ul>
<li><a href="#">三级目录</a>
<ul>
<li><a href="#">四级目录</a>
<ul>
<li><a href="#">五级目录</a>
<ul>
<li><a href="#">......</a>
<ul>
<li><a href="#">第n级目录</a>
<ul>
<li class="Child"><a href="#">叶结点1</a></li>
<!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul>
</li>
<!--Sub Node n -->
</ul>
</li>
<!--Sub Node 6 -->
</ul>
</li>
<!--Sub Node 5 -->
</ul>
</li>
<!--Sub Node 4-->
</ul>
</li>
<!--Sub Node 3-->
</ul>
</li>
<!--Sub Node 2-->
</ul>
</li>
<!--Sub Node 1 -->
</ul>
</div>
<script type="text/javascript">
<!--
function Ob(o){
var o=document.getElementById(o)?document.getElementById(o):o;
return o;
}
function Hd(o) {
Ob(o).style.display="none";
}
function Sw(o) {
Ob(o).style.display="";
}
function ExCls(o,a,b,n){
var o=Ob(o);
for(i=0;i<n;i++) {o=o.parentNode;}
o.className=o.className==a?b:a;
}
function CNLTreeMenu(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 || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB ="<img src=\""+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) {
var sClsName=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;
}
}
}
var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");
MyCNLTreeMenu1.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");
MyCNLTreeMenu2.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");
MyCNLTreeMenu3.InitCss("Opened","Closed","Child","http://www.zzsky.cn/effect/images/treemenu/s.gif");
-->
</script>

</body>
</html>




1 楼 ypzhangyx 2010-11-25  
最好能截个图放上来 比较直观一些
2 楼 jiayj198609 2010-11-25  
呵呵。。。是我疏忽了！我看看哈；能不能弄个图片上去！
3 楼 zp19827 2010-11-26  
  又是一个CSS样式加载的
4 楼 yunzhongxia 2010-11-26  
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？
5 楼 tangjikey 2010-11-26  
请在FF下查看，ie会报脚本错误。
我已经完整的格式化代码(html在dw下格式，js在aptana下格式)，html格式输出。
如果没有安装ff，请下载正文后附件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<style type="text/css">
a { text-decoration:none; }
a, a:visited { color:#000; background:inherit; }
body { margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; }
dt { font-size:22px; font-weight:bold; margin:0 0 0 15px; }
dd { margin:0 0 0 15px; }
h4 { margin:0; padding:0; font-size:18px; text-align:center; }
p { margin:0; padding:0 0 0 18px; }
p a, p a:visited { color:#00f; background:inherit; }
/*CNLTreeMenu Start*/ 
.CNLTreeMenu img.s { cursor:pointer; vertical-align:middle; }
.CNLTreeMenu ul { padding:0; }
.CNLTreeMenu li { list-style:none; padding:0; }
.Closed ul { display:none; }
.Child img.s { background:none; cursor:default; }
#CNLTreeMenu1 ul { margin:0 0 0 17px; }
#CNLTreeMenu1 img.s { width:20px; height:15px; }
#CNLTreeMenu1 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed1.gif) no-repeat 0 0; }
#CNLTreeMenu1 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child1.gif) no-repeat 3px 5px; }
#CNLTreeMenu2 ul { margin:0 0 0 17px; }
#CNLTreeMenu2 img.s { width:17px; height:15px; }
#CNLTreeMenu2 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened2.gif) no-repeat 4px 6px; }
#CNLTreeMenu2 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed2.gif) no-repeat 3px 6px; }
#CNLTreeMenu2 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child2.gif) no-repeat 3px 5px; }
#CNLTreeMenu3 ul { margin:0 0 0 17px; }
#CNLTreeMenu3 img.s { width:34px; height:18px; }
#CNLTreeMenu3 .Opened img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/opened3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Closed img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/closed3.gif) no-repeat 0 1px; }
#CNLTreeMenu3 .Child img.s { background:url(http://www.zzsky.cn/effect/images/treemenu/child3.gif) no-repeat 13px 2px; }
/*CNLTreeMenu End*/ 
/*Temp CSS for View Demo*/ 
#CNLTreeMenu1, #CNLTreeMenu2, #CNLTreeMenu3 { float:left; width:249px; border:1px solid #99BEEF; background:#D2E4FC; color:inherit; margin:3px; padding:3px; }
#CNLTreeMenu1, #CNLTreeMenu2 { padding-bottom:15px; }
.ViewCode { clear:both; border:1px solid #FFB900; background:#FFFFCC; color:inherit; margin:3px; padding:3px; }
.ViewCode h6 { color:#00f; }
</style>
<title>无限级树形菜单- java中文网:www.javaweb.cc</title>
</head>
<body>
<div class="CNLTreeMenu" id="CNLTreeMenu1">
  <h4>CNL Tree Menu1</h4>
  <p><a id="AllOpen_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onClick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->
<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
  <h4>CNL Tree Menu2</h4>
  <p><a id="AllOpen_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" onClick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->
<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
  <h4>CNL Tree Menu3</h4>
  <p><a id="AllOpen_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onClick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
  <ul>
    <li class="Opened"><a href="http://www.zzsky.cn">Zzsky.Cn</a>
      <ul>
        <li><a href="#1">技术区</a>
          <ul>
            <li><a href="#">网页技术</a>
              <ul>
                <li class="Child"><a href="#">JavaScript</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
                <li class="Child"><a href="#">Ajax</a></li>
                <li class="Child"><a href="#">网页制作工具</a></li>
                <li class="Child"><a href="#">设计/图形</a></li>
                <li class="Child"><a href="#">Flash/多媒体</a></li>
                <li class="Child"><a href="#">VML/Web3D</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">Web编程</a>
              <ul>
                <li class="Child"><a href="#">Java</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">.Net</a></li>
                <li class="Child"><a href="#">ASP/VBScript</a></li>
                <li class="Child"><a href="#">PHP</a></li>
                <li class="Child"><a href="#">Perl/Python</a></li>
                <li class="Child"><a href="#">Web综合/开源</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">数据库</a>
              <ul>
                <li class="Child"><a href="#">Access/SQLServer</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
                <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
            <li><a href="#">服务器</a>
              <ul>
                <li class="Child"><a href="#">Windows/IIS</a></li>
                <!--Child Node-->
                <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
                <li class="Child"><a href="#">应用服务器</a></li>
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
        <li><a href="#1">二级目录</a>
          <ul>
            <li><a href="#">三级目录</a>
              <ul>
                <li><a href="#">四级目录</a>
                  <ul>
                    <li><a href="#">五级目录</a>
                      <ul>
                        <li><a href="#">......</a>
                          <ul>
                            <li><a href="#">第n级目录</a>
                              <ul>
                                <li class="Child"><a href="#">叶结点1</a></li>
                                <!--Child Node-->
                                <li class="Child"><a href="#">叶结点2</a></li>
                                <li class="Child"><a href="#">叶结点3</a></li>
                              </ul>
                            </li>
                            <!--Sub Node n -->
                          </ul>
                        </li>
                        <!--Sub Node 6 -->
                      </ul>
                    </li>
                    <!--Sub Node 5 -->
                  </ul>
                </li>
                <!--Sub Node 4-->
              </ul>
            </li>
            <!--Sub Node 3-->
          </ul>
        </li>
        <!--Sub Node 2-->
      </ul>
    </li>
    <!--Sub Node 1 -->
  </ul>
</div>
<script type="text/javascript">
    <!--
    function Ob(o){
        var o = document.getElementById(o) ? document.getElementById(o) : o;
        return o;
    }
    
    function Hd(o){
        Ob(o).style.display = "none";
    }
    
    function Sw(o){
        Ob(o).style.display = "";
    }
    
    function ExCls(o, a, b, n){
        var o = Ob(o);
        for (i = 0; i < n; i++) {
            o = o.parentNode;
        }
        o.className = o.className == a ? b : a;
    }
    
    function CNLTreeMenu(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 || "http://www.zzsky.cn/effect/images/treemenu/s.gif";
            this.ImgBlankA = "<img src=\"" + this.ImgUrl + "\" class=\"s\" onclick=\"ExCls(this,'" + ClassName0 + "','" + ClassName1 + "',1);\" alt=\"展开/折叠\" />";
            this.ImgBlankB = "<img src=\"" + 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){
            var sClsName = 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;
            }
        }
    }
    
    var MyCNLTreeMenu1 = new CNLTreeMenu("CNLTreeMenu1", "li");
    MyCNLTreeMenu1.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    var MyCNLTreeMenu2 = new CNLTreeMenu("CNLTreeMenu2", "li");
    MyCNLTreeMenu2.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    var MyCNLTreeMenu3 = new CNLTreeMenu("CNLTreeMenu3", "li");
    MyCNLTreeMenu3.InitCss("Opened", "Closed", "Child", "http://www.zzsky.cn/effect/images/treemenu/s.gif");
    -->
</script>
</body>
</html>
6 楼 jorneyR 2010-11-26  
郁闷，都是写死的。
为什么不把树的内容放在XML文件中，然后浏览器中加载树并动态分析树的内容，然后显示呢？
7 楼 吸烟的狐狸 2010-11-26  
楼主太不负责任了，刷积分呢？
8 楼 jsycbc 2010-11-26  
吸烟的狐狸 写道
楼主太不负责任了，刷积分呢？

楼上的不厚道，什么都想现成的
都像你这样，怎么进步
9 楼 BestUpon 2010-11-26  
HTMLTREE ！
10 楼 renwolang521 2010-11-27  
yunzhongxia 写道
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？

我觉得 javaeye 什么时候 也能 可以折叠 就好了。
对于长段代码 默认先折叠起来 看着有兴趣了 再展开看
11 楼 cn-done 2010-11-27  
忍住郁闷的心情。楼主的代码是否可以压缩成文件上传，只需发几个效果图就可以了。
放一堆代码而且还不用JE的CODE包装一下，IE频繁的报警：加载过慢
12 楼 a3mao 2010-11-28  
xloadtree 很好用
13 楼 yanyan_zhl 2010-11-28  
renwolang521 写道
yunzhongxia 写道
最讨厌看这种代码了，一团糟，javaeye的代码着色功能为什么不用呢？

我觉得 javaeye 什么时候 也能 可以折叠 就好了。
对于长段代码 默认先折叠起来 看着有兴趣了 再展开看

说的是哈...
14 楼 wcx1 2010-11-29  
看了一下，汗！！！！！！！！！！！！
15 楼 czyaapy99 2010-11-29  
对阿！都是写死滴，给它放作数据库里面读取出来，也可以啊！！！！
16 楼 神之小丑 2010-11-30  
lz 不会又是转载的吧？
17 楼 yjrl 2010-11-30  
楼主这么放代码有何意义额
18 楼 hereyouare 2010-12-01  
感谢楼主~~效果图是不错的~~
虽然楼主一开始没有用代码着色，但对于需要这些功能的人来说，他会自己复制到IDE里去看。
虽然楼主一开始没有截图，但对于需要这些功能的人来说，自己运行一下代码，效果可以自己看。
虽然楼主一开始没有将代码打包，但对于需要这些功能的人来说，复制下来代码，一样可以运行。
虽然楼主没有写出从数据库里读数据的方法，但对于需要这些功能的并且动手能力强的人来说，则可以自己实现这部分功能。

没有别的意思，只是感谢楼主的分享，能分享就是好人~好人也有自己事要做，也在学习与进步，希望楼主继续分享自己的经验~~
19 楼 william_zhg 2010-12-03  
能分享就是好事情。剩下的事情就自己去解决了。呵呵
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.