<!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>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body
{
margin: 0px;
padding: 20px;
font: 12px tahoma,宋体,sans-serif;
}
/* 无限子级菜单 开始 */
*
{
margin: 0px;
padding: 0px;
}
/* 外框 */
#TreeMenu
{
Width: 160px;
word-wrap: break-word;
background-color: #FFFFCC;
}
/* 每一个ul */
#TreeMenu ul
{
margin: 0px 0px 0px 10px;
list-style: none;
}
/* 第一个ul */
ul#TreeTop
{
margin: 0px;
}
/* 每一个li */
#TreeMenu ul li
{
width: 100%;
}
/* 每一个li里面的a 开始 */
#TreeMenu ul li a
{
padding: 0px 0px 0px 30px;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
#TreeMenu ul li a:link,
#TreeMenu ul li a:visited
{
color: #009933;
}
#TreeMenu ul li a:hover
{
color: #FF0000;
}
#TreeMenu ul li a:active
{
color: #009933;
}
/* 每一个li里面的a 结束 */
/* 关闭的节点 开始 */
li.TreeClosed
{
background: url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif</a>) no-repeat 0px 0px;
}
li.TreeClosed ul
{
display: none;
}
/* 关闭的节点 结束 */
/* 打开的节点 */
li.TreeOpened
{
background: url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif</a>) no-repeat 0px 0px;
}
/* 最终节点 开始 */
li.TreeChild
{
background:url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif</a>) no-repeat 0px 0px;
}
/* 调整最终节点的位置 */
#TreeMenu ul li.TreeChild
{
margin: 0px 0px 0px 4px;
}
/* 调整最终节点中a的位置 */
#TreeMenu ul li.TreeChild a
{
padding: 0px 0px 0px 15px;
}
/* 最终节点 结束 */
/* 全部展开折叠 开始 */
#SwitchAllNodes
{
padding: 10px 0px 10px 15px;
}
a#AllOpenID,
a#AllCloseID
{
color: #009933;
text-decoration: none;
}
a#AllCloseID
{
display: none;
}
a#AllOpenID:hover,
a#AllCloseID:hover
{
color: #FF0000;
}
/* 全部展开折叠 结束 */
/* 无限子级菜单 结束 */
</style>
<title>无标题文档</title>
</head>
<body>
<div id="TreeMenu">
<h4>Tree Menu</h4>
<div id="SwitchAllNodes">
<a id="AllOpenID" href="#" onclick="javascript:funSwitchAllNodes('Open','AllOpenID','AllCloseID');">全部展开</a>
<a id="AllCloseID" href="#" onclick="javascript:funSwitchAllNodes('Close','AllOpenID','AllCloseID');">全部折叠</a>
</div>
<ul id="TreeTop">
<!-- 第1级 开始 -->
<li class="TreeOpened"><a href="#">IECN.Net</a>
<ul>
<!-- 第2级 开始 -->
<li><a href="#">技术区</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">网页技术</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">JavaScript</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">HTML/XHTML/CSS</a></li>
<li class="TreeChild"><a href="#">Ajax</a></li>
<li class="TreeChild"><a href="#">网页制作工具</a></li>
<li class="TreeChild"><a href="#">设计/图形</a></li>
<li class="TreeChild"><a href="#">Flash/多媒体</a></li>
<li class="TreeChild"><a href="#">VML/Web3D</a></li>
</ul>
</li>
<!-- 第3级 结束 -->
<!-- 第3级 开始 -->
<li><a href="#">Web编程</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Java</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">.Net</a></li>
<li class="TreeChild"><a href="#">ASP/VBScript</a></li>
<li class="TreeChild"><a href="#">PHP</a></li>
<li class="TreeChild"><a href="#">Perl/Python</a></li>
<li class="TreeChild"><a href="#">Web综合/开源</a></li>
</ul>
</li>
<!-- 第3级 结束 -->
<!-- 第3级 开始 -->
<li><a href="#">数据库</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Access/SQLServer</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">MySQL/PostgreSQL</a></li>
<li class="TreeChild"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!-- 第3级 结束 -->
<!-- 第3级 开始 -->
<li><a href="#">服务器</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Windows/IIS</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">Unix/Linux/Apache</a></li>
<li class="TreeChild"><a href="#">应用服务器</a></li>
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->
<!-- 第2级 开始 -->
<li><a href="#">二级目录</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">三级目录</a>
<ul>
<!-- 第4级 开始 -->
<li><a href="#">四级目录</a>
<ul>
<!-- 第5级 开始 -->
<li><a href="#">五级目录</a>
<ul>
<!-- 中间级 开始 -->
<li><a href="#">......</a>
<ul>
<!-- 第n级 开始 -->
<li><a href="#">第n级目录</a>
<ul>
<!-- 第n+1级 内容 -->
<li class="TreeChild"><a href="#">最终节点1</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">最终节点2</a></li>
<li class="TreeChild"><a href="#">最终节点3</a></li>
</ul>
</li>
<!-- 第n级 结束 -->
</ul>
</li>
<!-- 中间级 结束 -->
</ul>
</li>
<!-- 第5级 结束 -->
</ul>
</li>
<!-- 第4级 结束 -->
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->
<!-- 第2级 开始 -->
<li><a href="#">第二个二级目录</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">第二个三级目录</a>
<ul>
<!-- 第4级 开始 -->
<li><a href="#">第二个四级目录</a>
<ul>
<!-- 第5级 开始 -->
<li><a href="#">第二个五级目录</a>
<ul>
<!-- 中间级 开始 -->
<li><a href="#">......</a>
<ul>
<!-- 第n级 开始 -->
<li><a href="#">第二个第n级目录</a>
<ul>
<!-- 第n+1级 内容 -->
<li class="TreeChild"><a href="#">最终节点1</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">最终节点2</a></li>
<li class="TreeChild"><a href="#">最终节点3</a></li>
</ul>
</li>
<!-- 第n级 结束 -->
</ul>
</li>
<!-- 中间级 结束 -->
</ul>
</li>
<!-- 第5级 结束 -->
</ul>
</li>
<!-- 第4级 结束 -->
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->
</ul>
</li>
<!-- 第1级 结束 -->
</ul>
</div>
<script type="text/javascript">
<!--
/*
结构是<ul><li><div class="TreeTMP"><a>内容</a></div></li></ul>
<TreeTMP>被点击后，改变这个<TreeTMP>父级的<li>的class名称
*/
function funSwitch(praOBJ)
{
if (praOBJ.parentNode.className == "TreeOpened")
praOBJ.parentNode.className = "TreeClosed";
else
praOBJ.parentNode.className = "TreeOpened";
}
function initTreeMenu()
{
/* 得到ID名称为 TreeMenu 中全部的<li>，代入对象数组 */
this.AllNodesOBJ = document.getElementById("TreeMenu").getElementsByTagName("li");
for (i = 0; i < this.AllNodesOBJ.length; i++ )
{
/* 把没有定义 class 名称的<li>定义为 TreeClosed */
if (this.AllNodesOBJ[i].className == "")
this.AllNodesOBJ[i].className = "TreeClosed";
/* 在 class 名称不是 TreeChild 的<li>的<a>的外面，再增加一个临时 div ，点击这个 div 则执行 funSwitch 函数 */
if (this.AllNodesOBJ[i].className != "TreeChild")
{
var myHTMLIna = this.AllNodesOBJ[i].getElementsByTagName("a")[0].outerHTML.toString();
this.AllNodesOBJ[i].getElementsByTagName("a")[0].outerHTML = "<div class='TreeTMP' onclick='javascript:funSwitch(this);'>" + myHTMLIna + "</div>";
}
}
}
/*
展开或关闭全部节点
全部展开用法：funSwitchAllNodes("Open","AllOpenID","AllCloseID");
全部关闭用法：funSwitchAllNodes("Close","AllOpenID","AllCloseID");
*/
function funSwitchAllNodes(praSwitch,praOpenID,praCloseID)
{
var myClassName;
if (praSwitch == "Open")
{
myClassName = "TreeOpened";
document.getElementById(praOpenID).style.display="none";
document.getElementById(praCloseID).style.display="inline";
}
if (praSwitch == "Close")
{
myClassName = "TreeClosed";
document.getElementById(praOpenID).style.display="inline";
document.getElementById(praCloseID).style.display="none";
}
/* 得到ID名称为 TreeMenu 中全部的<li>，代入对象数组 */
this.AllNodesOBJ = document.getElementById("TreeMenu").getElementsByTagName("li");
for (i = 0; i < this.AllNodesOBJ.length; i++ )
{
if (this.AllNodesOBJ[i].className != "TreeChild")
this.AllNodesOBJ[i].className = myClassName;
}
}
initTreeMenu();
-->
</script>
</body>
</html>
