模拟QQ列表展开收缩

最新推荐文章于 2019-02-20 10:06:08 发布

原创最新推荐文章于 2019-02-20 10:06:08 发布 · 284 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

7 篇文章

订阅专栏

本文展示了一个基于HTML和CSS的好友列表样式设计，并通过JavaScript实现了列表的交互功能，包括标题点击展开收起子列表及选择特定条目的背景变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li,h4 {
            margin: 0;
            padding: 0 ;
            list-style: none;
            text-indent: 15px;
            cursor: pointer;
        }
        h4 {
            line-height: 30px;
            background: url("img/ico1.gif") no-repeat 3px 10px #AFF7F7;
        }
        ul li ul li {
            border-bottom: #000 solid 1px;
        }
        #list {
            border: 1px solid #000;
            width: 200px;
            margin: 50px auto;
        }
        #list ul {
            display: none;
        }
        .active {
            background: url("img/ico2.gif") no-repeat 3px 10px #FBEB54;
        }
    </style>
</head>
<body>
<ul id="list">
    <li>
        <h4>我的好友</h4>
        <ul>
            <li>关羽</li>
            <li>张飞</li>
        </ul>
    </li>
    <li>
        <h4>企业好友</h4>
        <ul>
            <li>武则天</li>
            <li>李世民</li>
        </ul>
    </li>
    <li>
        <h4>黑名单</h4>
        <ul>
            <li>咩</li>
            <li>汪</li>
            <li>喵</li>
        </ul>
    </li>
</ul>

    <script>
        var oList= document.getElementById('list');
        var aUl = oList.getElementsByTagName('ul');
        var aH = oList.getElementsByTagName('h4');
        //将所需元素打包进一个数组再操作
        var aLi = [];
        var arrLi = [];

        for(var i=0;i<aUl.length;i++){
            aH[i].index = i;
            aH[i].onclick = function () {
                if (aH[this.index].className == '') {
                    aUl[this.index].style.display = 'block';
                    aH[this.index].className = 'active';
                } else {
                    aUl[this.index].style.display = 'none';
                    aH[this.index].className = '';
                }
            }
        }
        //找到所有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]);
            }
        }

        //li的点击事件
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].onclick = function () {
                for(var i=0;i<arrLi.length;i++){
                    arrLi[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#aaa';
            }
        }

        //点击某一标题收回其他标题内容
        for(var i=0;i<aUl.length;i++){
            aH[i].index = i;
            aH[i].onclick = function (){
                for(var j=0;j<aUl.length;j++){
                    aUl[j].style.display = 'none';
                }
                aUl[this.index].style.display = 'block'
            }
        }

    </script>
</div>
</body>
</html>