javascrip 树型菜单

 刚从网上学到这招，对比而言这种方法最简单，当然也有很多不足之处~！不过先记下，日后慢慢研究~！

先将如下代码下在head里面：

1. <style>
2. <!--
3. #foldheader{cursor:hand ; font-weight:bold ;
4. list-style-image:url(fold.gif)}
5. #foldinglist{list-style-image:url(list.gif)}
6. //-->
7. </style>
8. <script language="JavaScript1.2">
9. <!--
11. var head="display:''"
12.   
13. function change(){
14.   if(!document.all)
15.   return
16.   if (event.srcElement.id=="foldheader") {
17.   var srcIndex = event.srcElement.sourceIndex
18.   var nested = document.all[srcIndex+1]
19.   if (nested.style.display=="none") {
20.   nested.style.display=''
21.   event.srcElement.style.listStyleImage="url(open.gif)"
22.   }
23.   else {
24.   nested.style.display="none"
25.   event.srcElement.style.listStyleImage="url(fold.gif)"
26.   }
27.   }
28.   }
29. document.onclick=change
30. //-->
31. </script>

再将如下代码放在body 里：根据不同的页面需求做一些简单修改就搞定了，TMD，太简单了，爽~！

1. <ul>
2. <li id="foldheader">News</li>
3. <ul id="foldinglist" style="display:none">
4. <li><a href="#">CNN</a></li>
5. <li><a href="#">ABC News</a></li>
6. <li><a href="#">Vancouver Sun</a></li>
7. </ul>
8.  <li id="foldheader">Games</li>
9. <ul id="foldinglist" style="display:none">
10. <li><a href="#">GameSpot</a></li>
11. <li><a href="#">Happy Puppy</a></li>
12. <li><a href="#">Game Center</a></li>
13. </ul>
14.  <li id="foldheader">Software</li>
15. <ul id="foldinglist" style="display:none">
16. <li><a href="#">outer 1</a></li>
17. <li><a href="#">outer 2</a></li>
18. <li id="foldheader">Nested</li>
19. <ul id="foldinglist" style="display:none">
20. <li><a href="#">nested 1</a></li>
21. <li><a href="#">nested 2</a></li>
22. </ul>
23. <li><a href="#">outer 3</a></li>
24. <li><a href="#">outer 4</a></li>
25. </ul>
26. </ul>
27. <script language="JavaScript1.2">
28. <!--
29.   /**
30.   * Get cookie routine by Shelley Powers 
31.   * ([e-mail])
32.   */
33.   function get_cookie(Name) {
34.   var search = Name + "="
35.   var returnvalue = "";
36.   if (document.cookie.length > 0) {
37.   offset = document.cookie.indexOf(search)
38.   // if cookie exists
39.   if (offset != -1) { 
40.   offset += search.length
41.   // set index of beginning of value
42.   end = document.cookie.indexOf(";", offset);
43.   // set index of end of cookie value
44.   if (end == -1) end = document.cookie.length;
45.   returnvalue=unescape(document.cookie.substring(offset, end))
46.   }
47.   }
48.   return returnvalue;
49.   }
50. if (get_cookie(window.location.pathname) != ''){
51.   var openresults=get_cookie(window.location.pathname).split(" ")
52.   for (i=0 ; i < openresults.length ; i++){
53.   foldinglist[openresults[i]].style.display=''
54.   document.all[foldinglist[openresults[i]].sourceIndex -
55.   1].style.listStyleImage="url(open.gif)"
56.   }
57.   }
58. if (document.all){
59.   var nodelength=foldinglist.length-1
60.   var nodes=new Array(nodelength)
61.   var openones=''
62.   }
63. function check(){
64.   for (i=0 ; i <= nodelength ; i++){
65.   if (foldinglist[i].style.display=='')
66.   openones=openones + " " + i
67.   }
68.   document.cookie=window.location.pathname+"="+openones
69.   }
70. if (document.all)
71.   document.body.onunload=check
72.   //-->
73. </script>