JS闭包实现给DIV添加事件 显示二级菜单例子

HTML:  

 1 < ul  id ="pmenu"  class ="adminLeftNav" >    
 2      < li  >菜单1 
 3          < div  id ="p10" > 
 4              < a  href ="#" >·子菜单 </ a > 
 5              < a  href ="#" >·子菜单 </ a > 
 6              < a  href ="#" >·子菜单 </ a > 
 7          </ div > 
 8      </ li > 
 9      < li  >菜单2 
10          < div  id ="p11" > 
11              < a  href ="#" >·子菜单 </ a > 
12              < a  href ="#" >·子菜单理 </ a > 
13              < a  href ="#" >·子菜单录 </ a > 
14              < a  href ="#" >·子菜单 </ a > 
15              < a  href ="#" >·子菜单 </ a > 
16          </ div > 
17      </ li > 
18      < li  >菜单3 
19          < div  id ="p12" > 
20              < a  href ="#" >·子菜单 </ a > 
21              < a  href ="#" >·子菜单 </ a > 
22              < a  href ="#" >·子菜单 </ a > 
23              < a  href ="#" >·子菜单 </ a > 
24              < a  href ="#" >·子菜单 </ a > 
25          </ div > 
26      </ li > 
27      < li  >菜单4 
28          < div  id ="p13" > 
29              < a  href ="#" >·子菜单 </ a > 
30              < a  href ="#" >·子菜单 </ a > 
31              < a  href ="#" >·子菜单 </ a > 
32              < a  href ="#" >·子菜单 </ a > 
33              < a  href ="#" >·子菜单 </ a > 
34          </ div >   
35      </ li > 
36      < li  >菜单5 
37          < div  id ="p14" > 
38              < a  href ="#" >·子菜单 </ a > 
39              < a  href ="#" >·子菜单表 </ a > 
40              < a  href ="#" >·子菜单 </ a > 
41              < a  href ="#" >·子菜单 </ a > 
42          </ div > 
43      </ li > 
44      < li  >菜单6 
45          < div  id ="p15" > 
46              < a  href ="#" >·子菜单 </ a > 
47          </ div > 
48      </ li > 
49 </ ul >
50

 

CSS:

 

 1 ul.adminLeftNav {} {width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;}  
 2 ul.adminLeftNav li {} { line-height:34px;font-size:12px;color:#0B6BB3;font-weight:bold;border-bottom:1px solid #A8C8EE; 
 3background:url(/eaf/images/cmail_7.gif) no-repeat 20px 12px;text-indent:40px;cursor:pointer;background-color:#FFFFFF;}  
 4 ul.adminLeftNav li:hover {} {background-color:#C4E7DE;}  
 5 ul.adminLeftNav li.hover {} {background-color:#C4E7DE;}  
 6 ul.adminLeftNav li div {} {display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}  
 7 ul.adminLeftNav li div a {} {display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;}  
 8 ul.adminLeftNav li div a:hover {} {text-decoration:underline;}
 9
10

 

JavaScript:

 

 1 var obj1 = document.getElementById("pmenu").getElementsByTagName("li"); 
 2      for( var i=0;i<obj1.length;i++) 
 3      { 
 4        //闭包实现给对象添加事件 
 5        (function(){ 
 6            var temp = obj1[i]; 
 7            temp.onmouseover = function(){temp.className='hover';} 
 8            } 
 9         )(); 
10        (function(){ 
11            var temp = obj1[i]; 
12            temp.onmouseout = function(){temp.className='';} 
13            } 
14         )(); 
15         (function(){            
16            var x = i; 
17            obj1[x].onclick = function(){showChildMenu('P1'+x,'#');} 
18            } 
19         )(); 
20    } 
21
22      function showChildMenu(id,url) { 
23        var obj = document.getElementById("pmenu").getElementsByTagName("div"); 
24        for(var i=0;i<obj.length;i++) 
25        { 
26            obj[i].style.display='none'; 
27        } 
28        if(id!='') 
29            document.getElementById(id).style.display='block'; 
30    }