技术文章
当前位置:首页 > 技术文章

js可伸缩树型目录代码,js树型目录

<!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>
<title>Web Administrator</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { background:#CAE1FB; margin:0px; font-size:12px; }
a { color:#000000; text-decoration:none; }
a:hover { color:#428EFF;text-decoration:underline; }
.TDiv {
margin-left:8px;margin-top:10px;float:left;width:140px;height:auto;background:#ffffff;padding:10px;border:#A3A7AC 1px solid
}
.TImage {
float:left;width:auto;height:18px;padding-right:2px
}
.TMenu {
float:left;width:100%;height:18px;line-height:18px;cursor:pointer
}
</style>
<script type="text/javascript">
function isIE(){
if(window.navigator.userAgent.toString().toLowerCase().indexOf("msie")>=1)
return true;
else
return false;
}
if(!isIE()){
HTMLElement.prototype.__defineGetter__( "innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i <childS.length; i++)
{
if(childS[i].nodeType==1)
anyString += childS[i].tagName=="BR"?''\n'':childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__( "innerText",
function(sText){
this.textContent=sText;
}
);
}
function openMenu(id) {
var icopath="treeico/";
var treeCount=document.getElementById("treeCount").innerText;
for(var i=1;i<=treeCount;i++)
{document.getElementById("Menu"+i).style.display="none";
document.getElementById("img"+i).src = icopath + "folderClosed.gif";
document.getElementById("imgx"+i).src=icopath+"plus2.gif";}
document.getElementById("Menu"+id).style.display="";
document.getElementById("img"+id).src = icopath + "folderopen.gif";
document.getElementById("imgx"+id).src=icopath+"plus4.gif";
if(id==treeCount)
{document.getElementById("imgx"+treeCount).src=icopath+"plus4.gif";}
else{document.getElementById("imgx"+treeCount).src=icopath+"plus1.gif";}
}</script>
</head>
<body>
<div class="TDiv">
<div id="treeCount" style="display:none">4</div>
<table width="160" border="0" cellpadding="0" cellspacing="0">
<tr><td><div class="TMenu"><div class="TImage"><img src="treeico/folder.gif" /></div>管理根目录</div></td></tr>
<tr>
<td onmouseup="openMenu(1);">
<div class="TMenu"><div class="TImage"><img id="imgx1" src="treeico/plus4.gif" /><img id="img1" src="treeico/folderOpen.gif" /></div>网站栏目1</div>
</td>
</tr>
<tr>
<TD id="Menu1">
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div><a href="#">网站栏目21</a></div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div><a href="#">网站栏目21</a></div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div><a href="#">网站栏目21</a></div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div><a href="#">网站栏目21</a></div>
<div class="TMenu"><div class="TImage"><img src="treeico/line3.gif" /><img src="treeico/leaf.gif" /></div>网站栏目25</div>
</td>
</tr>
<tr>
<td onmouseup="openMenu(2);">
<div class="TMenu"><div class="TImage"><img id="imgx2" src="treeico/plus2.gif" /><img id="img2" src="treeico/folderClosed.gif" /></div>网站栏目2</div>
</td>
</tr>
<tr>
<TD id="Menu2" style="display: none">
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网站1</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网站2</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网站3</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网站4</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line3.gif" /><img src="treeico/leaf.gif" /></div>网站5</div>
</td>
</tr>
<tr>
<td onmouseup="openMenu(3);">
<div class="TMenu"><div class="TImage"><img id="imgx3" src="treeico/plus2.gif" /><img id="img3" src="treeico/folderClosed.gif" /></div>网站栏目2</div>
</td>
</tr>
<tr>
<TD id="Menu3" style="display: none">
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网1站1</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网2站2</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网3站3</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>网4站4</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line3.gif" /><img src="treeico/leaf.gif" /></div>网5站5</div>
</td>
</tr>
<tr>
<td onmouseup="openMenu(4);">
<div class="TMenu"><div class="TImage"><img id="imgx4" src="treeico/plus1.gif" /><img id="img4" src="treeico/folderClosed.gif" /></div>网站栏目2</div>
</td>
</tr>
<tr>
<TD id="Menu4" style="display: none">
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>1网站1</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>2网站2</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>3网站3</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line2.gif" /><img src="treeico/leaf.gif" /></div>4网站4</div>
<div class="TMenu"><div class="TImage"><img src="treeico/line3.gif" /><img src="treeico/leaf.gif" /></div>5网站5</div>
</td>
</tr>
</table>
</div>
</body>
</html>