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

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

<script>
    window.onload= function(){
       var oList=document.getElementById("list");
       var oH2=oList.getElementsByTagName("h2");
       var oUl=oList.getElementsByTagName("ul");
        var arrLi=[];
        //找到h2然后循环
        for(var i=0;i<oH2.length;i++){
            oH2[i].index=i;
            oH2[i].onclick=function(){
                //点击展开其他的关闭，原理就是循环全部清空，而每次点击给添加样式
                for(var i=0;i<oH2.length;i++){
                    oH2[i].className="";
                    oUl[i].style.display="none";
                }
                oUl[this.index].style.display="block";
                this.className="active";
            }
        }
        //这里要找到每个组下面的ul里面的li
        for(var i=0;i<oUl.length;i++){
            var aLi=oUl[i].getElementsByTagName("li");
            for(var j=0;j<aLi.length;j++){
                arrLi.push(aLi[j]) ;//因为要操作的li比较多，那么可以把它push到一个数组里再进行点击操作
            }
        }

        for(var i=0;i<arrLi.length;i++){ //这里先循环每一个分组里的子元素li
            arrLi[i].onclick=function(){ //然后去点击当前子元素li添加选中样式
                //那么就每次进来采用先清空，然后点击哪一个添加哪一个
                for(var i=0;i<arrLi.length;i++){
                    arrLi[i].className="";
                }
                this.className="hover";

            }
        }
    }

</script>

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