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

 1 <script>
 2     window.onload= 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].onclick=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].onclick=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>