原生js实现二级伸缩菜单

看似简单的小功能，坑却不少...主要为了练习一下自己的js实践能力，真是不写不知道，这么小小的一个东西我遇到的坑实在是太多了，放上来仅供参考学习..优化什么的都不好....
效果如图所示：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ列表</title>
    <style>
        #list{
            width:240px;
            background-color: #5fb878;
        }
        ul, li, h2{
            margin:0;
            padding:0;
            list-style: none;
            text-indent:20px;
        }
        #list ul{
            display:none;
        }

        .item li{
            border-bottom:1px solid #333;
            text-indent: 24px;
            padding:4px;

        }
         h2{
            font-size: 16px;
            background:url(images/ico1.gif) no-repeat 5px center #FF9; color:#000;
             margin-bottom: 1px;
             padding:3px;
         }
        h2.active { background:url(images/ico2.gif) no-repeat 5px center #FF9; color:#000; }
        .item .current{background-color: #01AAED}

    </style>
</head>
<body>
<ul id="list">
    <li>
        <h2>小学弟们</h2>
        <ul class="item">
            <li>陈思远</li>
            <li>胡嘉怡</li>
            <li>黄子恒</li>
            <li>刘丹</li>
            <li>南极翁</li>
            <li>马鹏飞</li>
            <li>麻怡若</li>
        </ul>
    </li>
    <li>
        <h2>我的好友</h2>
        <ul class="item">
            <li>程曦</li>
            <li>付柳元</li>
            <li>黄环</li>
            <li>刘巧丽</li>
            <li>余萌</li>
            <li>沈润</li>
            <li>徐婷</li>
        </ul>
    </li>
    <li>
        <h2>大学同学</h2>
        <ul class="item">
            <li>蔡中勇</li>
            <li>丁玉成</li>
            <li>陈欣欣</li>
            <li>杨帅</li>
            <li>杜同舟</li>
            <li>李丹丹</li>
            <li>李济雨</li>
        </ul>
    </li>
    <li>
        <h2>高中同学</h2>
        <ul class="item">
            <li>方祥</li>
            <li>胡晓欢</li>
            <li>李连松</li>
            <li>刘一泽</li>
            <li>罗勇</li>
            <li>毛蒙</li>
            <li>卫齐</li>
        </ul>
    </li>
</ul>
</body>
<script>
    window.onload = function(){
        var oul = document.getElementById('list');
        var oH2 = oul.getElementsByTagName('h2');
        var aul = oul.getElementsByTagName('ul');
        var aulList = [];

        for(var i=0, h2Len = oH2.length;i<h2Len;i++){
            aulList.push(aul[i]);
            //给每个h2加上点击事件
            //并给每个h2加上自定义属性index---不加是没有index的
            oH2[i].index  = i;
            oH2[i].onclick = function(){
                var that = this.index;
                //循环所有的ul,只展开一个
                for(var h=0;h<aulList.length;h++){
                    if(h!=that){ //隐藏ul索引与当前h2索引不匹配的ul列表
                        aulList[h].style.display='none';
                        oH2[h].className ='';
                    }else{
                        //如果当前的ul是关闭的，则展开，否则关闭
                        if(this.className ==''){
                            aul[that].style.display = 'block';
                            oH2[that].className ='active';
                        }else{
                            aul[that].style.display = 'none';
                            oH2[that].className ='';
                        }
                    }
                }
            }
        }

        //为每个li加上点击事件
        var liArr = [];
        for(var j=0 ,aulLen = aul.length;j< aulLen;j++){ //循环UL 收集所有UL下的li放到数组liArr里,并未所有的li加上点击事件
            var ali = aul[j].getElementsByTagName('li');
            for(var k=0 ;k<ali.length;k++){
                liArr.push(ali[k]);
                ali[k].onclick = function(){
                    for(var m=0 ;m<liArr.length;m++){
                        if(liArr[m]!=this){
                            liArr[m].className='';
                        }
                    }
                    if(this.className==''){
                        this.className = 'current';
                    }else{
                        this.className = ' ';
                    }
               }
            }
        }
       // alert(liArr.length);
    }
</script>
</html>