模仿QQ菜单的手风琴效果（点击当前展示其“兄弟”关闭）

上一篇博客的内容主要是模仿QQ菜单写出的类似手风琴的效果，今天就来改进一下这个手风琴效果，点击当前的，当前展开，其他的关闭，总之就是要实现点击其中一个，其他的关闭的效果，关于布局和样式的代码，见上一篇博客，今天主要来看看js的处理：

 1 <script>
 2     window.οnlοad= function(){
 3        var oList=document.getElementById("list");
 4        var oH2=oList.getElementsByTagName("h2");
 5        var oUl=oList.getElementsByTagName("ul");
 6         var arrLi=[];
 7         //找到h2然后循环
 8         for(var i=0;i<oH2.length;i++){
 9             oH2[i].index=i;
10             oH2[i].οnclick=function(){
11                 //点击展开其他的关闭，原理就是循环全部清空，而每次点击给添加样式
12                 for(var i=0;i<oH2.length;i++){
13                     oH2[i].className="";
14                     oUl[i].style.display="none";
15                 }
16                 oUl[this.index].style.display="block";
17                 this.className="active";
18             }
19         }
20         //这里要找到每个组下面的ul里面的li
21         for(var i=0;i<oUl.length;i++){
22             var aLi=oUl[i].getElementsByTagName("li");
23             for(var j=0;j<aLi.length;j++){
24                 arrLi.push(aLi[j]) ;//因为要操作的li比较多，那么可以把它push到一个数组里再进行点击操作
25             }
26         }
27 
28         for(var i=0;i<arrLi.length;i++){ //这里先循环每一个分组里的子元素li
29             arrLi[i].οnclick=function(){ //然后去点击当前子元素li添加选中样式
30                 //那么就每次进来采用先清空，然后点击哪一个添加哪一个
31                 for(var i=0;i<arrLi.length;i++){
32                     arrLi[i].className="";
33                 }
34                 this.className="hover";
35 
36             }
37         }
38     }
39 
40 </script>

其实原理还是之前写过的例子，就是每次进来都先全部清空，然后点击时给添加样式。这个还是比较好理解一些，其他的方法也有今天就不说了！好了，明天继续！

转载于:https://www.cnblogs.com/web001/p/7912161.html