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

Question

/*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();}

Answer 1

/*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;
}

Answer 2

/*调用代码*/
<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>
 
<!--树型菜单结束-->

Answer 3

那个代码太乱了，重写一个简单的多！以下代码仅在 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>

Answer 4

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

Answer 5

1 图片替换文字前面的字符——修改样式表就可以实现了。
2 保持状态——写入 Cookie 。参考脚本 
http://working8.com/JS/jstreemenu.js下班了，哈