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;

3

background: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

}