js-模拟QQ列表

最新推荐文章于 2021-06-05 00:05:40 发布

原创最新推荐文章于 2021-06-05 00:05:40 发布 · 288 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html5 #css3

习题复盘专栏收录该内容

6 篇文章

订阅专栏

该博客主要介绍了使用JS模拟QQ列表的实现。包含效果图展示，以及代码部分，代码涵盖了CSS、结构和JS三个方面，借助HTML5、CSS3和JavaScript技术完成模拟QQ列表的功能。

js-模拟QQ列表

效果图：

在这里插入图片描述

代码

css部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h2 {
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    background-color: #95A5A5;
}

i {
    color: #6D6F6F;
}

ul {
    list-style: none;
}

li {
    width: 300px;
    line-height: 40px;
    background-color:#CCCCCC;
    border-bottom: 1px solid #999999;
}

#first ul{
    display: none;
}

结构部分：

<ul id="first">
    <li>
        <h2><img id="img" src="./image/ico1.gif" alt=""> 我的朋友</h2>
        <ul>
            <li>樱木花道</li>
            <li>三井寿</li>
            <li>蒋丞</li>
            <li>顾淼</li>
        </ul>
    </li>
    <li>
        <h2><img id="img" src="./image/ico1.gif" alt=""> 特别好友</h2>
        <ul>
            <li>顾飞</li>
            <li>流川枫</li>
        </ul>
    </li>
    <li>
        <h2><img id="img" src="./image/ico1.gif" alt=""> 陌生人</h2>
        <ul>
            <li>王旭</li>
            <li>查无此人</li>
            <li>查无此人</li>
            <li>查无此人</li>
        </ul>
    </li>
 </ul>

js部分：

        var oFirst = document.getElementById('first');
        var oUl = oFirst.getElementsByTagName('ul');
        var oImg = document.getElementById('img');
        var oH = oFirst.getElementsByTagName('h2');


        // oUl[0].style.display = 'none';

        for (var i = 0; i < oH.length; i++) {
            tag = true;
            oH[i].index = i;
            oH[i].onclick = function () {
                if (this.tag == true) {

                    oUl[this.index].style.display = 'block';
                    oImg.src = "./image/ico2.gif"; this.tag = false;
                } else {

                    oUl[this.index].style.display = 'none';
                    oImg.src = "./image/ico1.gif"; this.tag = true;
                        }
                }
            }