display tree

superyang

浏览: 22228 次
性别:
来自: 广州

最近访客更多访客>>

guochongcan

Alapn

xgrass18

zs396963330

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript ASP.net 编程 ASP HTML

<!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.com
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(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();

}

</script>

<style type="text/css"></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>
   <li>
            <a href="http://www.webjx.com/htmldata/sort/29.html">java网络编程</a>
      <ul>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/26.html">jsp</a>
          </li>
          <li>
            <a href="http://www.webjx.com/htmldata/sort/28.html">j2ee</a>
          </li>
</ul>
          </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>