此回复为自动发出,仅用于显示而已,并无任何其他特殊作用
楼主【javatotheworld】截止到2008-06-27 20:51:35的历史汇总数据(不包括此帖):
发帖数:35                 发帖分:820                
结贴数:34                 结贴分:800                
未结数:1                  未结分:20                 
结贴率:97.14 %            结分率:97.56 %            
值得尊敬

解决方案 »

  1.   

    每个节点用div控制位置生成树
    div中加个checkbox就可以了
      

  2.   

    html代码:index.html<html>
    <head>
    <title></title>
    <script src="tree.js"></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 onload="initiate()">
    <ul id="containerul">
    <li> 网页教学网 
    <ul>
    <li>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/2.html">建站指南</a> 
    </li>
           <li>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/3.html">网页制作</a>
    </li>
    <li>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/4.html">动画制作</a>
    </li>
    </ul>
    </li>
    <li> 网络编程 
    <ul>
    <li>
    <input type="checkbox"/><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>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/26.html">PHP</a>
    </li>
    <li>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/28.html">数据库</a>
    </li>
    <li>
    <input type="checkbox"/><a href="http://www.webjx.com/htmldata/sort/29.html">CGI</a>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </body>
    </html>JS代码:tree.jsvar 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)";
          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(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)";}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();}
    图片:tree\minus.png   tree\page.png    tree\plus.png
    分别是减号、空白图片、加号
    tree是一个文件夹,和index.html为同一级目录