自己YY的js树形菜单

qiu6406

1. <style>
   
2. .hide {
   
3. 
   
4.     display:none;    
   
5. }
   
6. .show {
   
7.     display:block;
   
8. }
   
9. </style>
   
10. 
    
11. <script type="text/javascript">
    
12.     
    
13.     var EventUtil = {
    
14.         
    
15.         addHandler: function(element, type, handler){
    
16.             if (element.addEventListener){
    
17.                 element.addEventListener(type, handler, false);
    
18.             }
    
19.             else if (element.attachEvent) {
    
20.                 element.attachEvent("on"+type, handler);
    
21.             }
    
22.             else {
    
23.                 element["on"+type] = handler;    
    
24.             }    
    
25.         },
    
26.         
    
27.         removeHandler: function(element, type, handler){
    
28.             if (element.removeEventListener){
    
29.                 element.removeEventListener(type, handler, false);
    
30.             }
    
31.             else if (element.detachEvent){
    
32.                 element.detachEvent("on"+type, handler);    
    
33.             }
    
34.             else {
    
35.                 element["on"+type] = null;    
    
36.             }
    
37.         },
    
38.         
    
39.         getEvent: function(event) {
    
40.             return event ? event : window.event;    
    
41.         },
    
42.         
    
43.         getTarget: function(event) {
    
44.             return event.target || event.srcElement;    
    
45.         }
    
46.             
    
47.     }
    
48. 
    
49. 
    
50.     function change(event) {
    
51.         var event = event;
    
52.         var element = this;
    
53.         var odiv = EventUtil.getTarget(event).getElementsByTagName("div").item(0);
    
54.         //alert(odiv.tagName);
    
55.         var CName = element.className;
    
56.         //var divCName = odiv.getElementByTagName("div").item(0).className;
    
57.         //alert(divCName);
    
58.         if(CName == "level_1"){
    
59.             element.className = "level_2";
    
60.             odiv.className = "show"
    
61.         }
    
62.         else
    
63.         {
    
64.             element.className = "level_1";
    
65.             odiv.className = "hide";
    
66.         }
    
67.         
    
68.     }
    
69.     
    
70.     window.onload=function(){
    
71.     var ou=document.getElementById("content_left_colume").getElementsByTagName("ul") ;
    
72.     
    
73.     //alert(ou.length);
    
74.     for (var i=0 ; i<ou.length ;i++){
    
75.         //alert(ou.item(i).tagName);
    
76.         EventUtil.addHandler(ou.item(i),"click",change);
    
77.         }
    
78.     }
    
79.     
    
80. </script>
    
81. <div id="content_left_colume">
    
82. 
    
83.     <ul class="level_1">
    
84.         <li >11111
    
85.             <div class="hide">
    
86.                 <a href=#>222222222</a>
    
87.                 <a href=#>222222222</a>
    
88.                 <a href=#>222222222</a>
    
89.                 <a href=#>222222222</a>
    
90.                 <a href=#>222222222</a>
    
91.                 <a href=#>222222222</a>
    
92.                 <a href=#>222222222</a>
    
93.              </div>
    
94.         </li>
    
95.     </ul>
    
96.     <ul class="level_1">
    
97.         <li >11111
    
98.             <div class="hide">
    
99.                 <a href=#>222222222</a>
    
100.                 <a href=#>222222222</a>
     
101.                 <a href=#>222222222</a>
     
102.                 <a href=#>222222222</a>
     
103.                 <a href=#>222222222</a>
     
104.                 <a href=#>222222222</a>
     
105.                 <a href=#>222222222</a>
     
106.              </div>
     
107.         </li>
     
108.     </ul>
     
109.     <ul class="level_1">
     
110.         <li >11111
     
111.             <div class="hide">
     
112.                 <a href=#>222222222</a>
     
113.                 <a href=#>222222222</a>
     
114.                 <a href=#>222222222</a>
     
115.                 <a href=#>222222222</a>
     
116.                 <a href=#>222222222</a>
     
117.                 <a href=#>222222222</a>
     
118.                 <a href=#>222222222</a>
     
119.              </div>
     
120.         </li>
     
121.     </ul>
     
122. 
     
123. </div>