Javascript实现 QQ好友列表的展开和隐藏

Javascript实现 QQ好友列表的展开和隐藏

你好哇刘岩！最近再看王小波写给李银河的《爱你就像爱生命》，好生羡慕刘银河，有个如此爱她的人，也很羡慕王小波又一个陪他到老的人。其中最喜欢的一句话就是：我把我的整个灵魂都给你，连同它的怪癖，耍小脾气，忽明忽暗，一千八百种坏毛病。；它真讨厌，只有一点好，爱你。（这也是想对我的恋人说的，但无可奈文采不及王小波的半斗）。王小波真是可爱啊，在他爱人面前如同一个孩子，会撒娇，会耍小脾气，就连想恋爱人的方式都是千奇百怪，有时候觉得我与他又是如此相似，无时无刻不在想着她，真的不能幻想，王小波那个时候有微信他会是如此的状态。（也许他还是如此文艺，写一封信）。我好希望时间能够快一点，这样就能快点见到你。

如图，下面就是QQ好友列表的显示和隐藏。
它实现的功能就是：
1、点击好友列表的标题，打开下面的好友列表，再次点击标题， 关闭列表。多个好友列表之间互不影响。

2、点击好友名字，出现高亮样式。

HTML代码

<ul id="list">
        <li>
            
            <h2><i class="iconfont icon-right"></i>特别关心</h2>
            <ul>
                <li>你好哇刘岩</li>
            </ul>
            
        </li>
        <li>
            <h2><i class="iconfont icon-right"></i>我的好友</h2>
            <ul>
                <li>潘安</li>
                <li>兰陵王</li>
                <li>宋玉</li>
                <li>卫玠</li>
            </ul>
        </li>
        <li>
            <h2><i class="iconfont icon-right"></i>高中同学</h2>
            <ul>
                <li>西施</li>
                <li>貂蝉</li>
                <li>王昭君</li>
                <li>杨玉环</li>
            </ul>
        </li>
    </ul>

CSS代码

*{
            box-sizing:border-box;
        }
        body,ul,li,h2{
            margin:0;
            padding:0;
        }
        li{
            list-style:none;
        }
        h2{
            font-size:18px;
            line-height:2;
            padding-left:30px;
            position:relative;
            border-bottom:1px solid #d4a498;
        }
        #list{
            width:300px;
            height:auto;
            background:#fdc4b6;
            margin:50px auto;
        }
        .cur{
            background-color:#d9d9f3;
        }
        #list ul{
            background:#6abe83;
            display:none;
        }
        #list ul li{
            line-height:2;
            padding-left:10px;
            border-bottom:1px solid #519164;
        }
        .current{
            background:#f07810;
        }
        .iconfont{
            position:absolute;
            left:10px;
            font-size:20px;
        }

JS代码

var list=document.getElementById("list");
        var oUl=list.getElementsByTagName("ul");
        var oH2=list.getElementsByTagName("h2");
        var oI=document.getElementsByTagName("i");

        var arroLi=[];

        for(var i=0;i<oH2.length;i++){
            oH2[i].index=i;
            oH2[i].onclick=function(){
                if(this.className==""){
                oUl[this.index].style.display="block";
                this.className="cur";
                oI[this.index].className="iconfont icon-bottom";
                }
                else{
                oUl[this.index].style.display="none";
                this.className="";
                oI[this.index].className="iconfont icon-right";
                }                
            }                
            }

        for(var j=0;j<oUl.length;j++){
            var oLi=oUl[j].getElementsByTagName("li");
            for(var i=0;i<oLi.length;i++){
                arroLi.push(oLi[i]);
            }
        }

        for(var i=0;i<arroLi.length;i++){
                arroLi[i].onclick=function(){
                    for(var i=0;i<arroLi.length;i++){
                        arroLi[i].className=""
                    }
                    this.className="current"
                    
                }
            }

谢谢大家！