常用的三种树形菜单->很实用的
<!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 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 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 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="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 能分享就是好事情。剩下的事情就自己去解决了。呵呵
