简易qq列表

最新推荐文章于 2022-07-12 20:24:59 发布

fizz141242

最新推荐文章于 2022-07-12 20:24:59 发布

阅读量202

点赞数

分类专栏： JavaScript 简易qq列表文章标签： javascript

本文链接：https://blog.csdn.net/fizz141242/article/details/107874657

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

简易qq列表

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1817611_llcuhaglid.css">
    <style>
        ul {
            list-style-type: none;
            display: none;
        }

        /* li{
            
        } */
        div {
            width: 100px;
            background-color: skyblue;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span class="iconfont icon-right-s"></span>
        <span>1</span>
    </div>
    <ul>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <span class="iconfont icon-right-s"></span>
        <span>2</span>
    </div>
    <ul>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <div><span class="iconfont icon-right-s"></span>
        <span>3</span></div>
    <ul>
        <li>9</li>
        <li>10</li>
        <li>11</li>
    </ul>
    <script>
        var div = document.querySelectorAll('div')
        var ul = document.querySelectorAll('ul')
        var li = document.querySelectorAll('li')
        var span = document.getElementsByClassName('iconfont ')
        for (var i = 0; i < div.length; i++) {
            div[i].index = i
            div[i].tag = '收起'
            div[i].onclick = function () {
                if (this.tag === '收起') {
                    for (var i = 0; i < ul.length; i++) {
                        ul[i].index = i
                        ul[this.index].style.display = 'block'
                        span[this.index].className = 'iconfont icon-below-s';
                    }
                    this.tag = '打开'
                } else {
                    for (var i = 0; i < ul.length; i++) {
                        ul[i].index = i
                        ul[this.index].style.display = 'none'
                        span[this.index].className = 'iconfont icon-right-s';
                    }
                    this.tag = '收起'
                }
            }
        }
    </script>
</body>

</html>