无限级CSS树形菜单（转载）

最新推荐文章于 2021-06-16 22:43:10 发布
最新推荐文章于 2021-06-16 22:43:10 发布
阅读量146 收藏
点赞数
文章标签： CSS ASP.net Sybase JavaScript Oracle ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dgkhgdnkgkk/article/details/83759819
版权
<!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" lang="zh-cn">
<head>
<title>CNL Tree Menu Ver1.02 - 无限级树形菜单 Written by CNLei, 枫岩 </title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<meta name="generator" content="editplus" />
<meta name="author" content="CNLei,枫岩,www.cnlei.net" />
<meta name="keywords" content="CSS Menu,树形菜单,CNLei" />
<meta name="description" content="" />
<!--
**************************************
HTML Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : CNLei.Y.L@gmail.com
MySite : http://www.cnlei.net
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
**************************************
-->
<link type="text/css" rel="stylesheet" href="http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/css4cnltreemenu.css" />
</head>
<body>
<p>实例演示：</p>
<dl>
<dt>CNL Tree Menu <small>Ver1.02</small></dt>
<dd><strong>Author</strong>：CNLei,枫岩</dd>
<dd><strong>MySite</strong>：<a href="http://www.cnlei.net" _fcksavedurl="http://www.cnlei.net" style="color:#00f;">www.cnlei.net</a></dd>
<dd><strong>E-Mail</strong>：cnlei.y.l<span style="color:#00f">#</span>gmail.com (请将<span style="color:#00f">#</span>换成<span style="color:#00f">@</span>)</dd>
<dd><strong>Intro</strong>：
<ol>
<li>"CNL Tree Menu"为无限级树形，兼容以下版本的浏览器：IE5.0+, FF1.06+, Opera8.5+ ……</li>
<li>HTML,CSS,JavaScript代码相互分离(即数据，风格，脚本三者分离)，可应用于多种场合，易于维护修改；更换树形图标，只需要修改CSS文件.</li>
<li>通过W3C校验(XHtml1-Strict,CSS1.0). </li>
<li>最后更新：2006-2-13 </li>
</ol>
</dd>
</dl>
<!--CNLTreeMenu Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net" _fcksavedurl="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1" _fcksavedurl="#1">技术区</a>
<ul>
<li><a href="#" _fcksavedurl="#">网页技术</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Ajax</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">网页制作工具</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">设计/图形</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Flash/多媒体</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">Web编程</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">.Net</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">ASP/VBScript</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">PHP</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Perl/Python</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">数据库</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">服务器</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a id="AllClose_2" href="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net" _fcksavedurl="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1" _fcksavedurl="#1">技术区</a>
<ul>
<li><a href="#" _fcksavedurl="#">网页技术</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Ajax</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">网页制作工具</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">设计/图形</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Flash/多媒体</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">Web编程</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">.Net</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">ASP/VBScript</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">PHP</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Perl/Python</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">数据库</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">服务器</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" _fcksavedurl="#" οnclick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net" _fcksavedurl="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1" _fcksavedurl="#1">技术区</a>
<ul>
<li><a href="#" _fcksavedurl="#">网页技术</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Ajax</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">网页制作工具</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">设计/图形</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Flash/多媒体</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">Web编程</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">.Net</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">ASP/VBScript</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">PHP</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Perl/Python</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">数据库</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#" _fcksavedurl="#">服务器</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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" _fcksavedurl="#1">二级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">三级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">四级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">五级目录</a>
<ul>
<li><a href="#" _fcksavedurl="#">......</a>
<ul>
<li><a href="#" _fcksavedurl="#">第n级目录</a>
<ul>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#" _fcksavedurl="#">叶结点2</a></li>
<li class="Child"><a href="#" _fcksavedurl="#">叶结点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 -->
<!--CNLTreeMenu3 End-->
<script type="text/javascript">
<!--
/*****************************
JavaScript Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : CNLei.Y.L@gmail.com
MySite : http://www.cnlei.net
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
*****************************/
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 || "css/s.gif";
this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" οnclick=\"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://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");
MyCNLTreeMenu2.InitCss("Opened","Closed","Child","http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");
MyCNLTreeMenu3.InitCss("Opened","Closed","Child","http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
-->
</script>
<div class="ViewCode">
<h6>CSS Code：</h6>
<pre>
.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(skin1/opened.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(skin1/child.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(skin2/opened.gif) no-repeat 4px 6px;}
#CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;}
#CNLTreeMenu2 .Child img.s {background:url(skin2/child.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(skin3/opened.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;}
</pre>
</div>
<div class="ViewCode">
<h6>JavaScript Code：</h6>
<pre>
/*****************************
JavaScript Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : <a href="mailto:CNLei.Y.L@gmail.com" _fcksavedurl="mailto:CNLei.Y.L@gmail.com">CNLei.Y.L@gmail.com</a>
MySite : <a href="http://www.cnlei.net" _fcksavedurl="http://www.cnlei.net" target="_blank">http://www.cnlei.net</a>
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
*****************************/
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) {
this.ClassName0=ClassName0;
this.ClassName1=ClassName1;
this.ClassName2=ClassName2;
this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" οnclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
this.ImgBlankA+=
this.ImgBlankB ="<img src=\"css/s.gif\" 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;
}
}
}
</pre>
</div>
<div class="ViewCode">
<h6>HTML Code：</h6>
<pre>
点击右键就可查看^_^
</pre>
</div>
</body>
</html>

http://www.cssk8.com/html/css_example/200905/26-1067.html
dgkhgdnkgkk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
无限级CSS树形菜单 Ver2.0
10-30
无限级CSS树形菜单是一种网页设计中的交互元素，用于展示具有层级关系的数据，例如网站导航、文件目录等。在Web开发中，这种菜单通常由HTML、CSS和JavaScript共同构建，以实现动态展开和折叠的效果。在Ver2.0中，...
JS+CSS简单树形菜单实现方法
10-23
本文将详细讲解如何使用JavaScript和CSS来实现一个简单的树形菜单。 首先，我们来理解JavaScript在此处的作用。JavaScript是客户端脚本语言，用于动态修改HTML和CSS，实现交互效果。在树形菜单的实现中，JavaScript...
无限级CSS树形菜单
weixin_30814319的博客
08-10 196
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a&g...
jQuery实现的无限级树形菜单效果代码
weixin_30270889的博客
07-31 290
<!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>...
纯html无限级目录树,利用Ajax实现无限级目录树（.NET)[转载]
weixin_39622123的博客
06-16 145
比较符合自己的习惯，整个代码不难。是利用CSS实现的。家里的电脑上不能安装MS SQL，索性就用MySQL。顺路学习了一下使用MySql的Function。希望使用的XDJM能在这里留个言。谢谢数据库：ysql> create table category(-> categoryid int,-> categoryname varchar(20),-> FatherId i...
HTML无限级树形菜单(Sql数据库)
weixin_34376986的博客
03-23 385
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultTree.aspx.cs" Inherits="DefaultTree" %><html xmlns="http://www.w3.org/1999/xhtml" ><head><meta http-equiv="Content...
JQUERY实现的小巧简洁的无限级树形菜单
acxl0372的博客
08-31 239
JQUERY实现的小巧简洁的无限级树形菜单，可用于后台或前台侧栏菜单！兼容性也比较好。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt...
jquery,tree无限级树形菜单+简单实用案例
weixin_33913377的博客
11-04 176
jquery,tree无限级树形菜单+简单实用案例 我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来，方便以后调用。记录下来，希望给新手们提供帮助。要记得导入jquery.js tree.js 哦 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%...
ASP.NET AJAX 无限级 JS 树形菜单
weixin_33724059的博客
08-03 49
之前一篇参见：ASP.NET JS+Sql无限级树型菜单上一篇是在后台实现的，这次改造为AJAX实现，注意先看一下其中的dTree的API。功能说明： 由Tree.html中的JQuery AJAX代码发起HTTP请求到GetTreeData.aspx获取JSON格式的字符串，然后在Tree.html中将字符串格式化为JSON格式，用dTree函数递归构造JS Tree。步骤： ...
jquery 树形导航菜单无限级
adai19850204的博客
05-11 96
转自：http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <styl...
用html+css+js实现一个无限级树形控件
weixin_33812433的博客
06-04 632
https://blog.csdn.net/cc_fys/article/details/81284638 树形菜单示例： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&gt...
CSS树形菜单
10-10
在这个名为“CSS树形菜单”的项目中，我们主要关注的是如何使用CSS来构建和美化这种交互式的菜单。 首先，要创建一个基础的树形菜单，通常我们需要HTML结构来表示菜单的层级关系。每个菜单项可能包含一个或多个子...
基于jquery实现无限级树形菜单
11-27
总的来说，通过结合HTML结构、CSS样式和jQuery脚本，我们可以创建一个交互式的无限级树形菜单，提高用户在网站上导航的体验。这个实例为自定义和扩展提供了基础，你可以根据项目需求进行适当的修改和增强。
dTree 无限级树形菜单
04-10
《dTree：构建无限级树形菜单的利器》 在前端开发中，树形菜单是一种常见的数据展示形式，尤其在管理界面或者数据层级结构复杂的场景下，它能清晰地展示层次关系，便于用户操作和理解。dTree就是这样一款用于创建...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
最新发布
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
layui2.5以下版本树形菜单文档
07-30
其中，树形菜单是Layui框架中非常常用的一个组件。 在Layui框架2.5以下的版本，树形菜单的使用相对较为简单。首先，我们需要引入Layui的相关文件，包括layui.css和layui.js。然后，在HTML中创建一个容器，用于渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值