首页>案例集

JavaScript案例5:QQ好友列表的展开和隐藏

QQ好友列表的展开和隐藏效果。

第一个案例的功能是:

1、点击好友列表的标题,打开下面的好友列表,再次点击标题, 关闭列表。多个好友列表之间互不影响。

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

效果如图:

QQ列表展开收缩.gif

具体效果点击查看

一、html代码

<ul id="list">
    <li class="item1">
    <h2>我的好友</h2>
<ul>
    <li>且听风吟</li>
<li>爱宝贝的麻麻</li>
<li>自由旅行</li>
<li>最熟悉的陌生人</li>
</ul>
</li>
<li class="item1">
    <h2>我的同事</h2>
<ul>
    <li>土豪朋友</li>
<li>时光纪实</li>
<li>杨静</li>
<li>NB领导</li>
</ul>
</li>
<li class="item1">
    <h2>我的同学</h2>
<ul>
    <li>涛哥</li>
<li>海豹</li>
<li>成老妈</li>
<li>曾经的同桌</li>
</ul>
</li>
<li class="item1">
    <h2>黑名单</h2>
<ul>
    <li>SB</li>
<li>明妹子</li>
<li>黑社会老大</li>
</ul>
</li>
</ul>

二、css代码

body,ul,h2{
    margin:0;
    padding:0;
    }
body{
    font:1em/1.8 "microsoft Yahei";
    color:#333;
    background-color:#eee;}
li{
    list-style:none;}
h2{
    font-weight:normal;
    background-color:rgba(0,0,0,.8);
    color:#fff;
    font-size:1.25rem;
    cursor:default;}
#list{
    width:300px;
    margin:20px auto;
    background-color:rgba(255,255,255,.5);}
.item1 h2{
    position:relative;
    text-indent:1.5em;}
.item1 h2.active{
    background-color:#32B1A2;}
.item1 h2.active:before,.item1 h2:before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    margin-top:-4px;
}
.item1 h2:before{
    border-left:8px solid #fff;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    }
.item1 h2.active:before{
    border-top:8px solid #fff;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    }

.item1 ul{
    display:none;
    }
.item1 li{
    padding:0.5em 0.8em;
    cursor:default;}
.item1 li.active{
    background-color:#e1e1e1;}

三、js代码

window.onload=function(){
//找对象
    var oUl=document.getElementById("list");
    var aH2=oUl.getElementsByTagName("h2");
    var aUl=oUl.getElementsByTagName("ul");
    var aLi=null;
    var arrLi=[];
    for(var i=0;i<aH2.length;i++){
        aH2[i].index=i; //让h2和下面的ul产生关联。
        aH2[i].onclick=function(){
            //alert(aUl[this.index]);
            if(this.className==""){
                aUl[this.index].style.display="block";
                this.className="active";
            }
            else{
                aUl[this.index].style.display="none";
                this.className="";
                }
            }
        }
    
    //嵌套for循环用于找到所有的li,保存进入数组,不要在找li的时候再加入事件。防止嵌套太多,效率不好。
    for(var i=0;i<aUl.length;i++){
        aLi=aUl[i].getElementsByTagName("li");
        for(var j=0;j<aLi.length;j++){
            arrLi.push(aLi[j]);  //把每一个嵌套ul下面的li推进数组保存起来。
            }
        }
    //alert(arrLi.length);

    //为每一个li加上事件
    for(var i=0;i<arrLi.length;i++){
        arrLi[i].onclick=function(){
            for(var i=0;i<arrLi.length;i++){  //先把所有的li的高亮样式去掉
                arrLi[i].className="";
                }
            this.className="active";  //再为当前的li添加高亮效果。
            }       
        }


    }

第二个案例稍微做了一点改变。

1、点击好友列表标题的时候,展开下方列表,但是会关闭其他好友列表。

2、再次点击的时候,关闭自己的好友列表。

效果如图:

QQ列表展开收缩第二版.gif

具体效果点击查看

一、html代码

<ul id="list">
    <li class="item1">
    <h2>我的好友</h2>
<ul>
    <li>且听风吟</li>
<li>爱宝贝的麻麻</li>
<li>自由旅行</li>
<li>最熟悉的陌生人</li>
</ul>
</li>
<li class="item1">
    <h2>我的同事</h2>
<ul>
    <li>土豪朋友</li>
<li>时光纪实</li>
<li>杨静</li>
<li>NB领导</li>
</ul>
</li>
<li class="item1">
    <h2>我的同学</h2>
<ul>
    <li>涛哥</li>
<li>海豹</li>
<li>成老妈</li>
<li>曾经的同桌</li>
</ul>
</li>
<li class="item1">
    <h2>黑名单</h2>
<ul>
    <li>SB</li>
<li>明妹子</li>
<li>黑社会老大</li>
</ul>
</li>
</ul>

二、css代码

body,ul,h2{
    margin:0;
    padding:0;
    }
body{
    font:1em/1.8 "microsoft Yahei";
    color:#333;
    background-color:#eee;}
li{
    list-style:none;}
h2{
    font-weight:normal;
    background-color:rgba(0,0,0,.8);
    color:#fff;
    font-size:1.25rem;
    cursor:default;}
#list{
    width:300px;
    margin:20px auto;
    background-color:rgba(255,255,255,.5);}
.item1 h2{
    position:relative;
    text-indent:1.5em;}
.item1 h2.active{
    background-color:#32B1A2;}
.item1 h2.active:before,.item1 h2:before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    margin-top:-4px;
}
.item1 h2:before{
    border-left:8px solid #fff;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    }
.item1 h2.active:before{
    border-top:8px solid #fff;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    }

.item1 ul{
    display:none;
    }
.item1 li{
    padding:0.5em 0.8em;
    cursor:default;}
.item1 li.active{
    background-color:#e1e1e1;}

三、js代码

window.onload=function(){
//找对象
    var oUl=document.getElementById("list");
    var aH2=oUl.getElementsByTagName("h2");
    var aUl=oUl.getElementsByTagName("ul");
    var aLi=null;
    var arrLi=[]; //空数组用于保存嵌套ul下面的所有li。
    for(var i=0;i<aH2.length;i++){
        aH2[i].index=i; //让h2和下面的ul产生关联。
        aH2[i].onclick=function(){
            //alert(aUl[this.index]);
            for(var i=0;i<aH2.length;i++){ //先把所有的ul都收起来
                if(this.className!=""){ //如果当前有高亮的,就保持原状。
                    this.className="active";
                }
                else{
                    aH2[i].className="";
                    }
                aUl[i].style.display="none";
                }
            
            if(this.className==""){ //再让被点击的ul展开或关闭。
                aUl[this.index].style.display="block";
                this.className="active";
            }
            else{
                /*aUl[this.index].style.display="none";*/
                this.className="";
                }
            }
        }
    
    //嵌套for循环用于找到所有的li,保存进入数组,不要在找li的时候再加入事件。防止嵌套太多,效率不好。
    for(var i=0;i<aUl.length;i++){
        aLi=aUl[i].getElementsByTagName("li");
        for(var j=0;j<aLi.length;j++){
            arrLi.push(aLi[j]);  //把每一个嵌套ul下面的li推进数组保存起来。
            }
        }
    //alert(arrLi.length);

    //为每一个li加上事件
    for(var i=0;i<arrLi.length;i++){
        arrLi[i].onclick=function(){
            
            if(this.className==""){
                for(var i=0;i<arrLi.length;i++){  //先把所有的li的高亮样式去掉
                    arrLi[i].className="";
                    }
                this.className="active";  //再为当前的li添加高亮效果。
            }else{
                this.className="";
                }
            }   
                
        }


    }

两个案例的核心知识点:

1、自定义属性

2、嵌套for循环遍历li

案例下载地址:

链接: https://pan.baidu.com/s/1oYZG9PJ1QkSNlFLeBhuo6w 提取码: vyww 

点赞


3
保存到:

相关文章

Top