菜单栏展开和收起效果(纯js)

浏览数：28 / 时间：2015年06月09日

2014年6月25日 15:36:29

需要关注的是:

1.用cookie保存用户当前点击的菜单项,不打扰后端代码

2.通过数学计算得到要显示和隐藏的div

3.点击事件是动态绑定到a标签上的,因此当dom加载完后,再执行js,也就是写在onload里

HTML如下:

 1 <h3 class="titleH3" id="101">aaaa</h3>
 2 <div class="subNav" id="1">
 3     <a href="#">1</a>
 4     <a href="#">2</a>
 5     <a href="#">3</a>
 6 </div>
 7 <h3 class="titleH3" id="102">bbbb</h3>
 8 <div class="subNav" id="2">
 9     <a href="#">11</a>
10     <a href="#">22</a>
11     <a href="#">33</a>
12 </div>

js如下:

 1 function showhide()
 2 {
 3     //绑定a链接的点击事件
 4     //点击a链接的时候将id写进cookie
 5     var arrSubNav = document.getElementsByClassName(‘subNav‘);
 6     for (var i = 0; i < arrSubNav.length; i++) {
 7         var arrHref = arrSubNav[i].getElementsByTagName(‘a‘);
 8         for (var j = 0; j < arrHref.length; j++) {
 9             arrHref[j].onclick = function () {
10                 var nodeParent = this.parentNode; //获取a链接所在的那个div块儿的id,注意,此处用this
11                 var idParent = nodeParent.getAttribute(‘id‘);
12                 document.cookie="userCheck="+idParent+";domain=***.***.com;path=/***"; //用cookie记录下用户当前的选择
13             }
14         }
15     }
16 
17     //从cookie里取值,展开指定div
18     userCheck = getUserCheckInfo();
19     if (userCheck > 0) {
20         for (var i = 0; i < arrSubNav.length; i++ ) {
21             arrSubNav[i].style.display = ‘none‘;
22         }
23         document.getElementById(userCheck).style.display = ‘block‘;
24     } else {
25         document.getElementById(‘3‘).style.display = ‘block‘;
26     }
27 
28     //点击标题时展开其下的菜单
29     var arrTitle = document.getElementsByClassName(‘titleH3‘);
30     for (var i = 0; i < arrTitle.length; i++) {
31         arrTitle[i].onclick = function () {
32             var idTitle = this.getAttribute(‘id‘);
33             var idSubNav = idTitle % 100; //根据title的id获取子菜单div的id
34             
35             for (var i = 0; i < arrSubNav.length; i++ ) {
36                 arrSubNav[i].style.display = ‘none‘;
37             }
38             document.getElementById(idSubNav).style.display = ‘block‘;
39 
40         }
41     };
42 }
43 
44 function getUserCheckInfo()
45 {
46     var strCookie = document.cookie;
47     //将多cookie切割为多个名/值对 
48     var arrCookie=strCookie.split("; "); 
49     var userCheck = ‘0‘; 
50     //遍历cookie数组，处理每个cookie对 
51     for(var i=0;i<arrCookie.length;i++) { 
52         var arr=arrCookie[i].split("="); 
53         if("userCheck"==arr[0]){ 
54             userCheck=arr[1]; 
55             break; 
56         } 
57     } 
58     return userCheck;
59 }