追加分

 
 temp.getElementsByTagName("li")[o].onclick=function(){
        showhide(this);
        writeCookie();
      }

解决方案 »

  1.   

    不鸟说清楚，结账吧，调试通过了
    下面是改过的函数和新加入的函数
    //添加string的原型
    String.prototype.trim=function(){
      return this.replace(/^\s*|\s*$/g,"");
    }
    function HiddenBrother(el){
      var o=el,ul;
      //隐藏同级向上的菜单
      while(o=o.previousSibling)
         if(o.nodeType==1){
           ul=o.getElementsByTagName("ul");
           if(ul.length>0){
             o.firstChild.style.backgroundImage="url(tree/plus.png)";
             for(var i=0;i<ul.length;i++)ul[i].style.display="none";
           }
         }  
      //隐藏同级向下的菜单
      o=el;
      while(o=o.nextSibling)
         if(o.nodeType==1){ 
           ul=o.getElementsByTagName("ul");
           if(ul.length>0){
             o.firstChild.style.backgroundImage="url(tree/plus.png)";
             for(var i=0;i<ul.length;i++)ul[i].style.display="none";
           }
         } 
    }//=============================修改过这里，上面的新添加的
    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){
        //=============================================================================================================================
          //替换文字为span并且加上事件
          wordSpan=document.createElement("span");
          word=temp.getElementsByTagName("li")[o].firstChild.nodeValue.trim();
          wordSpan.innerHTML=word;
          //删除文字
          temp.getElementsByTagName("li")[o].innerHTML=temp.getElementsByTagName("li")[o].innerHTML.replace(word,"");
          wordSpan.onclick=function(){
            showhide(this.parentNode);
            writeCookie();
            HiddenBrother(this.parentNode);//隐藏同级菜单//==========================================================================
          }
          
          temp.getElementsByTagName("li")[o].insertBefore(wordSpan,temp.getElementsByTagName("li")[o].firstChild)
          //=================================================================================================================================
          temp2 = document.createElement("span");
          temp2.className = "symbols";
          temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
          temp2.onclick=function(){
            showhide(this.parentNode);
            writeCookie();
            HiddenBrother(this.parentNode);//隐藏同级菜单//==========================================================================
          }      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(tree/page.png)";      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);    }  }}
      

  2.   

    楼上的很认真，写得很不错。
    我在原来的代码基础上随便改改，能满足要求而已！
    -----------------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>网页教学网无限级树型菜单演示</title>
    <script type="text/javascript">
    //more javascript from http://www.webjx.comvar 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(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
          
          //Added by jasson
          if( !temp.getElementsByTagName("li")[o].firstChild.tagName)
          {
           var html = temp.getElementsByTagName("li")[o].innerHTML;
           var title = html.substr(0, html.indexOf("<UL>"))
    html = html.substr(  html.indexOf("<UL>") )
          
           temp.getElementsByTagName("li")[o].innerHTML = html;
          
           var spanTitle = document.createElement("span");
           spanTitle.innerText = title;
           spanTitle.style.cursor = "hand";
           temp.getElementsByTagName("li")[o].insertBefore(spanTitle ,temp.getElementsByTagName("li")[o].firstChild)
          }            temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
          temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
          
          temp.getElementsByTagName("li")[o].children[0].onclick = temp.getElementsByTagName("li")[o].children[1].onclick =function()
          {
            showhide(this.parentNode);
            writeCookie();
          }            if(cookieArray[cookieCount]=="true")
          {        
            showhide(temp.getElementsByTagName("li")[o]);
          }      cookieCount++;    }
        else
        {
          temp2 = document.createElement("span");
          temp2.className = "symbols";
          temp2.style.backgroundImage = "url(tree/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(tree/minus.png)":"url(tree/plus.png)";
      
      // add by jasson
      if(  el.getElementsByTagName("ul")[0].style.display=="block")
      {
       if( el.parentElement )
       {
       var parUL = el.parentElement;      for( var i=0;i<parUL.children.length;i++ )
       {
           var curEL = parUL.children[i];
           if( curEL.tagName.toLowerCase()=="li" && curEL !=el )
           {
            if( curEL.getElementsByTagName("ul").length > 0 )
            {
              curEL .getElementsByTagName("ul")[0].style.display= "none";
         curEL .getElementsByTagName("span")[0].style.backgroundImage= "url(tree/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();}</script><style type="text/css"><!--#containerul, #containerul ul{
      text-align:left;
      margin:0; /* Removes browser default margins applied to the lists. */
      padding:0; /* Removes browser default padding applied to the lists. */
    }#containerul li{
      margin:0 0 0 30px; /* 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;
    }--></style>
    </head><body>
    <ul id="containerul">
      <li>网页教学网
        <ul>
          <li> <a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a> 
          </li>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
          </li>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
          </li>
        </ul>
      </li>
      <li> 网络编程
        <ul>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/24.html">Asp.net</a>
          </li>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/25.html">Asp</a>
            <ul>
              <li>
                <a href="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
              </li>
              <li>
                <a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
              </li>
              <li>
                <a href="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul><p>
      <script type="text/javascript">
    initiate(); // This must be placed immediately after the menu in order to format it properly.
    </script>
    </p>
    <h3>树形菜单</h3>
    <p>说明：一个很容易制作树形菜单，你可以无限级的添加下级菜单，菜单是通过列表方式写成的 </p>
    </body>
    </html>