這篇文章主要介紹了javascript實現樹形菜單的方法,涉及javascript動態操作頁面元素與節點屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript實現樹形菜單的方法。分享給大家供大家參考。具體如下：

1. var ME={ 
2. ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0}, 
3. html:function(da,f){ 
4. var s='<ul'+(f?' class="f"':'')+'>'; 
5. for(var i=0,l=da.length;i<l;i++){ 
6. if(typeof(da[i].pid)=='object'){ 
7. s+='<li><button type="button" class="'+(i==0&&this.ini.i?'s1':(i+1==l?'s5':'s3'))+'" onclick="ME.yc(this)"></button><span><button type="button" class="r1"></button><a href="javascript:;">'+da[i].ming+'</a></span>'; 
8. this.ini.i=false; 
9. s+=this.html(da[i].pid,(i+1==l)); 
10. }else{ 
11. s+='<li><button type="button" class="'+(i+1==l?'e3':'e1')+'"></button><span><button type="button" class="m1"></button><a href="http://www.survivalescaperooms.com" target="mainFrame">'+da[i].ming+'</a></span>'; 
12. } 
13. s+='</li>'; 
14. } 
15. s+='</ul>'; 
16. return s; 
17. }, 
18. st:function(id,da){ 
19. document.getElementById(id).innerHTML=this.html(da); 
20. }, 
21. yc:function(a){ 
22. var s=a.className.substr(1); 
23. if(s%2){ 
24. this.ini.d=a.parentNode.children[2]; 
25. this.ini.h1=this.hei(this.ini.d); 
26. this.ini.h3=this.ini.h1/10; 
27. this.yc1(1); 
28. a.className='s'+(parseInt(s)+1); 
29. a.parentNode.children[1].children[0].className='r2'; 
30. var ol=a.parentNode.parentNode._; 
31. if(typeof(ol)=='object'){ 
32. this.ini.d1=ol; 
33. this.ini.h=ol.offsetHeight; 
34. this.ini.h2=this.ini.h/10; 
35. this.yc2(1); 
36. ol.parentNode.children[0].className='s'+(parseInt(ol.parentNode.children[0].className.substr(1))-1); 
37. ol.parentNode.children[1].children[0].className='r1'; 
38. } 
39. a.parentNode.parentNode._=a.parentNode.children[2]; 
40. }else{ 
41. this.ini.d1=a.parentNode.children[2]; 
42. this.ini.h=this.ini.d1.offsetHeight; 
43. this.ini.h2=this.ini.h/10; 
44. this.yc2(1); 
45. a.className='s'+(parseInt(s)-1); 
46. a.parentNode.children[1].children[0].className='r1'; 
47. a.parentNode.parentNode._=''; 
48. } 
49. }, 
50. yc1:function(b){ 
51. var h1=ME.ini.h1-(11/(b+1)-1)*ME.ini.h3; 
52. with(ME.ini.d.style){ 
53. height=h1+'px'; 
54. display='block'; 
55. } 
56. if(b<10){ 
57. setTimeout('ME.yc1('+(b+1)+')',25); 
58. }else{ 
59. ME.ini.d.style.display='block'; 
60. ME.ini.d.style.height=''; 
61. } 
62. }, 
63. yc2:function(b){ 
64. var h1=(11/(b+1)-1)*ME.ini.h2; 
65. with(ME.ini.d1.style){ 
66. height=h1+'px'; 
67. } 
68. if(b<10){ 
69. setTimeout('ME.yc2('+(b+1)+')',25); 
70. }else{ 
71. ME.ini.d1.style.display=''; 
72. ME.ini.d1.style.height=''; 
73. } 
74. }, 
75. hei:function(a){ 
76. var b=a.cloneNode(true); 
77. b.style.position='absolute';  
78. b.style.display='block';  
79. b.style.visibility='hidden'; 
80. a.parentNode.appendChild(b); 
81. var h=b.offsetHeight; 
82. a.parentNode.removeChild(b); 
83. return h; 
84. } 
85. } 

希望本文所述對大家的javascript程序設計有所幫助。