JS之模拟QQ列表展示

最近学了点CS布局和JS，总是迫不及待的想写点小实例。

跟着妙味课堂学了一下模拟 QQ列表的简单功能展示，自己也敲了一遍代码。

HTML:

<ul id="list">  
        <li class='lis'>  
        <ul>  
            <h2>家人</h2>  
            <li>爸爸</li>  
            <li>老妈</li>  
            <li>弟弟</li>  
            <li>哥</li>  
            <li>表姐</li>   
        </ul>  
    </li>  
                      
        <li class='lis'>  
            <h2>闺蜜</h2>  
        <ul>  
            <li>大黄</li>  
            <li>桃子</li>  
            <li>阿丹</li>  
            <li>小敏</li>  
            <li>老王</li>  
        </ul>  
    </li>  
              
    <li class='lis'>  
            <h2>损友</h2>  
          <ul>  
            <li>霜哥</li>  
            <li>大翔</li>  
            <li>二狗</li>  
            <li>阿娇</li>  
            <li>熊猫</li>  
        </ul>  
        </li>  
      
        <li class='lis'>  
            <h2>吃货</h2>  
          <ul>  
            <li>娜姐</li>  
            <li>小慧</li>  
            <li>室长大人</li>  
            <li>荣荣</li>  
            <li>芬芬</li>  
        </ul>  
    </li>  
</ul>

CSS布局：

ul,h2 { padding:0; margin:0; }  
li { list-style:none; }  
#list { width:240px; border:1px solid #333; margin:0 auto; }  
#list .lis {}  
#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }  
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }  
#list ul { display:none; }  
#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }  
#list ul .hover{ background:orange; }

JS代码如下：

var oUl = document.getElementById('list');  
 var aH2 = oUl.getElementsByTagName('h2');  
var aUl = oUl.getElementsByTagName('ul');  
   for(i=0;i<aH2.length;i++){  
        aH2[i].index=i;  
        aH2[i].onclick=function(){  
                if(this.className==''){  
                    aUl[this.index].style.display='block';  
                    this.className='active';  
                }  
                else{  
                    aUl[this.index].style.display='none';  
                    this.className='';  
                }  
        }                                               
     }