JS闭包实现给DIV添加事件 显示二级菜单例子
来源:互联网 发布:淘宝首页翻动的图片 编辑:程序博客网 时间:2024/06/05 11:41
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
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:
1ul.adminLeftNav{}{width:140px;border:1px solid #A8C8EE;border-bottom:0px;list-style:none;margin:0;padding:0;text-align:left;}
2ul.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;}
4ul.adminLeftNav li:hover{}{background-color:#C4E7DE;}
5ul.adminLeftNav li.hover{}{background-color:#C4E7DE;}
6ul.adminLeftNav li div{}{display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}
7ul.adminLeftNav li div a{}{display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;}
8ul.adminLeftNav li div a:hover{}{text-decoration:underline;}
9
10
2ul.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;}
4ul.adminLeftNav li:hover{}{background-color:#C4E7DE;}
5ul.adminLeftNav li.hover{}{background-color:#C4E7DE;}
6ul.adminLeftNav li div{}{display:none;border-top:1px solid #A8C8EE;padding:5px 0;background:#fff;}
7ul.adminLeftNav li div a{}{display:block;line-height:20px;text-indent:30px;font-weight:normal;color:#000;text-decoration:none;}
8ul.adminLeftNav li div a:hover{}{text-decoration:underline;}
9
10
JavaScript:
1var 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 }
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 }
- JS闭包实现给DIV添加事件 显示二级菜单例子
- JS闭包实现给DIV添加事件
- [js]悬浮显示二级菜单的实现
- 给QPushButton添加二级菜单
- DIV+CSS实现二级菜单
- JS实现div居中显示的例子
- 用js给div添加鼠标悬停事件
- js+xml实现二级菜单
- js 实现 二级联动菜单
- js实现二级联动菜单
- DIV+CSS实现的横向二级菜单
- JS闭包导致循环给按钮添加事件时总是执行最后一个
- JS闭包导致循环给按钮添加事件时总是执行最后一个
- JS闭包导致循环给按钮添加事件时总是执行最后一个
- div css 二级菜单
- jsp+js实现的二级联动菜单
- js+css+ul实现二级菜单
- jsp+js实现的二级联动菜单
- 跨站点脚本编制
- javascript 动态给div添加事件
- QPS、PV和需要部署机器数量计算公式
- SGU 333 Random Shooting +数据加强版
- 数据库的水平拆分(转)
- JS闭包实现给DIV添加事件 显示二级菜单例子
- 模板类声明和定义 (转)
- 很好的linux下GPIO驱动详解文章 .
- 我们的未来在哪儿
- Insight into eDir-CMS (Composed by Wing and EA) - 1
- C 语言中二维数组指针详解
- 最基本的Win32程序----消息机制
- CEGUI学习笔记一--FirstWindow和FalagardDemo1分析
- UrlReWriteFilter 路径改写