请问这个树形菜单怎么能够单击展开，帮忙改改，菜鸟在线等 顶者有分！

[zhaohua0317]

网站：http://working8.com/
上的　资源分类　
我想实现比如单击 免费娱乐资源 这个项目 子目录自动打开
我是菜鸟　希望各位帮忙改改代码，我实在看不大懂 在线等~

[myvicy]

代码贴一下。

[zhaohua0317]

/*jstreemenu.js*/
var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

cookieCount=0;

if(document.cookie){

cookieArray=document.cookie.split(";");
cookieArray2=new Array();

for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}

}

cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

temp=document.getElementById("containerul");

for(var o=0;o<temp.getElementsByTagName("li").length;o++){

if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(jsimg/minus.png)":"url(jsimg/plus.png)"):"url(jsimg/plus.png)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}

cookieCount++;

}
else{

temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(jsimg/page.png)";

temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

}

}

}



function showhide(el){

el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(jsimg/minus.png)":"url(jsimg/plus.png)";

}



function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

cookieArray=new Array()

for(var q=0;q<temp.getElementsByTagName("li").length;q++){

if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

}
}

}

document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}

[zhaohua0317]

/*CSS文件csstreemenu.css*/
#containerul, #containerul ul{
text-align:left; margin:10,0,0,0;
/* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 10 12px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}

[zhaohua0317]

/*调用代码*/
<link type="text/css" rel="stylesheet" href="css/csstreemenu.css"/>
<script type="text/javascript" src="JS/jstreemenu.js"></script>

.....

<!--树型菜单开始-->
<div style="margin-left:0">
<ul id="containerul">
<li ><a href="rightcon.php?sortid=14" target="main">免费电影2</a>

<ul>

<li> <A href="sortone.php?sortid=34" target="_blank">做作</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=4" target="_blank">免费域名</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=33" target="_blank">皑皑</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=32" target="_blank">亲亲</A></li><!--Child Node-->




</ul>




</li><!--Sub Node 3-->
<li ><a href="rightcon.php?sortid=15" target="main">免费娱乐资源</a>

<ul>

<li> <A href="sortone.php?sortid=28" target="_blank">风</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=29" target="_blank">雨</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=30" target="_blank">雷</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=31" target="_blank">电</A></li><!--Child Node-->




</ul>




</li><!--Sub Node 3-->
<li ><a href="rightcon.php?sortid=16" target="main">免费个人存储资源</a>

<ul>

<li> <A href="sortone.php?sortid=12" target="_blank">免费赚钱资源3</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=26" target="_blank">Hi</A></li><!--Child Node-->


<li> <A href="sortone.php?sortid=27" target="_blank">Hello</A></li><!--Child Node-->




</ul>




</li><!--Sub Node 3-->
<li ><a href="rightcon.php?sortid=17" target="main">免费电子书</a>

<ul>



</ul>




</li><!--Sub Node 3-->
<li ><a href="rightcon.php?sortid=18" target="main">免费音乐网站</a>

<ul>



</ul>




</li><!--Sub Node 3-->
<li ><a href="rightcon.php?sortid=19" target="main">免费论坛</a>

<ul>



</ul>




</li><!--Sub Node 3-->
</ul>
</div>
<script type="text/javascript">
<!--
initiate();
-->
</script>

<!--树型菜单结束-->

[hotsunn]

up

[zhaohua0317]

自己顶下，高手在哪？

[yixianggao]

那个代码太乱了，重写一个简单的多！

以下代码仅在 IE 下通过测试，非 IE 浏览器请自行修改！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
ul
{
list-style-type: none;
}
.openedUl
{
display: block;
}
.closedUl
{
display: none;
}
.openedLi
{
list-style-type: circle;
cursor: hand;
}
.closedLi
{
list-style-type: disc;
cursor: hand;
}
.leafLi
{
list-style-type: none;
cursor: default;
}
</style>
<script language="JavaScript" defer>
<!--
var toc = document.getElementById("ulToc");
var itemCollection = toc.getElementsByTagName("li");
var tocCollection;
var oItem;
var oToc;

for (var i=0; i<itemCollection.length; i++)
{
oItem = itemCollection[i];
tocCollection = oItem.getElementsByTagName("ul");
if (tocCollection.length==0)
{
oItem.className = "leafLi";
}
else
{
oItem.className = "closedLi";
oItem.onclick = function ()
{
event.cancelBubble = true;
switch (event.srcElement.className)
{
case "closedLi":
this.className = "openedLi";

var currentNode = this.firstChild;

while (currentNode.tagName!="UL")
{
currentNode = currentNode.nextSibling;
}
currentNode.className = "openedUl";
break;

case "openedLi":
var tocChildCollection = this.getElementsByTagName("ul");
var oTocChild;

for (var k=0; k<tocChildCollection.length; k++)
{
oTocChild = tocChildCollection[k];

oTocChild.className = "closedUl";
oTocChild.parentNode.className = "closedLi";
}
break;
}
};
}

for (var j=0; j<tocCollection.length; j++)
{
oToc = tocCollection[j];
oToc.className = "closedUl";
}
}
//-->
</script>
</head>

<body>
<ul id="ulToc">
<li>Chapter 01
<ul>
<li>Section 01-01
<ul>
<li>Paragraph 01-01-01
<li>Paragraph 01-01-02
</ul>
<li>Section 01-02
<li>Section 01-03
</ul>
<li>Chapter 02
<ul>
<li>Section 02-01
<li>Section 02-02
</ul>
<li>Chapter 03
<ul>
<li>Section 03-01
<li>Section 03-02
<li>Section 03-03
<ul>
<li>Paragraph 03-03-01
<li>Paragraph 03-03-02
</ul>
<li>Section 03-04
</ul>
</ul>

</body>
</html>

[zhaohua0317]

To:yixianggao()
上面的代码怎么用图片替换文字前面的字符阿，也不能够纪录状态，比如打开一个子目录，一刷新又关闭了。谢谢你。不过还是郁闷，希望大家帮帮忙~

[yixianggao]

1 图片替换文字前面的字符——修改样式表就可以实现了。
2 保持状态——写入 Cookie 。

参考脚本
http://working8.com/JS/jstreemenu.js

下班了，哈