简易qq列表

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值