2021-06-04 jS手风琴之qq列表案例

本文链接：https://blog.csdn.net/a990628382/article/details/117572138

该博客介绍了如何使用JavaScript、HTML和CSS实现一个手风琴效果的QQ列表。通过点击标题，内容区域会进行展开和折叠，实现了一种交互式的用户体验。CSS用于设置样式，如边框、阴影、背景图片等，JS负责监听标题点击事件，动态切换隐藏和显示状态，并更新箭头图标的方向。

摘要由CSDN通过智能技术生成

jS手风琴之qq列表案例

html:


<body>
    <div class="box">
        <div class="item">
            <div class="title">
                <i class="icon right"></i>
                我的好友
            </div>
            <!-- 列表 -->
            <div class="list hide">
                <div class="friend">
                    <i class="logo"></i>
                    <span>张三</span>
                </div>
                <div class="friend">
                    <i class="logo"></i>
                    <span>李四</span>
                </div>
            </div>
            <div class="title">
                <i class="icon right"></i>
                我的好友
            </div>
            <!-- 列表 -->
            <div class="list hide">
                <div class="friend">
                    <i class="logo"></i>
                    <span>张三</span>
                </div>
                <div class="friend">
                    <i class="logo"></i>
                    <span>李四</span>
                </div>
            </div>
        </div>

    </div>
</body>

css:

 body{
        /* 用户选择，none让用户不能选择文档中的文本*/
        user-select: none;
        -moz-user-select: none;
    }
    .box{
        border: 1px solid #eee;
        width: 200px;
        margin: 10px auto;
        border-radius:2px ;
        box-shadow: 0 1px 5px 0 antiquewhite;
    }
    .box item .title{
        height: 40px;
        line-height: 40px;
        padding-left:10px ;
        border-bottom: 1px solid #eee ;
    }
    .box .item .title i.icon{
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 3px;
        /* background-color: red; */
        position: relative;
        top: 2px;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .box .item .title .right{
        background-image: url(./arrow-right.png);
    }
    .box .item .list{
        padding-left: 10px;
    }
    .box .item .list .friend{
        height: 50px;
        line-height: 50px;
    }
    .box .item .list .friend .logo{
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-image: url(./logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        top: 6px;
        margin-right: 5px;
    }
    .hide{
        display: none;
    }
    .down{
        background-image: url(./arrow-down.png);
    }
</style>

js:

var titles = document.querySelectorAll(".title");
//获取目标标签 titles（点击每一个标签出来对应的列表）
// 循环遍历 
for (let i = 0 ; i<titles.length;i++){
    const title = titles[i]
    //  监听事件
    title.addEventListener('click',function(){
        // 点击title 的下面的列表里是一个紧跟着title元素的div
        // nextElementSibling 下一个兄弟元素  
        // 获取title下的元素
        var list = title.nextElementSibling;
        // 获取箭头
        var icon = title.querySelector(".icon")
         
        var classList = list.classList;
        // 判断是否样式含有hide这个类明
        if(classList.contains("hide")){
            classList.remove("hide");
            icon.classList.remove("right");
            icon.classList.add("down")
        }else{
            classList.add("hide");
            icon.classList.add("right");
            icon.classList.remove("down")
        }
    })

}