用JS简单实现一个折叠手风琴效果

最新推荐文章于 2023-08-29 22:08:46 发布

Annaluo

最新推荐文章于 2023-08-29 22:08:46 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/Annaluo/article/details/123018677

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果如图所示，此时鼠标所在的位置背景色是黑色，第三个标签没有展开。

全部代码如下所示：（直接复制运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己试着写</title>
    <style>
        /* 打开和关闭手风琴面板的样式 */
        .accordion{
            background-color: bisque;
            color: blue;
            cursor: pointer;
            width: 100%;
            padding: 18px;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
        }
        /* 设置点击和鼠标悬停的样式 */
        .accordion:hover{
            background-color: aquamarine;
        }
        .active:hover{
            background-color: black;
        }
        /* 为手风琴面板设置样式，默认隐藏 */
        .panel{
            padding: 0 18px;
            background-color: blue;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.9s ease-out;
        }
        /* 设置 + -标志 */
        .accordion::after{
            content: '\002B';
            color: red;
            margin-right: 5px;
            font-weight: bolder;
            float: right;
        }
        .active::after{
            content: "\2212";
        }
    </style>
</head>
<body>
    <button class="accordion">第一个标签</button>
    <div class="panel">
        <p>1111111</p>
    </div>
    <button class="accordion">第二个标签</button>
    <div class="panel">
        <p>2222</p>
    </div>
    <button class="accordion">第三个标签</button>
    <div class="panel">
        <p>33333</p>
    </div>


    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;
        for(i=0;i<acc.length;i++){
            acc[i].addEventListener("click",function(){
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if(panel.style.maxHeight){
                    panel.style.maxHeight = null;
                }else{
                    panel.style.maxHeight = panel.scrollHeight + "px"
                }
            });
        }
    </script>
</body>
</html>

Annaluo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JS简单实现一个折叠手风琴效果

效果如图所示，此时鼠标所在的位置背景色是黑色，第三个标签没有展开。全部代码如下所示：（直接复制运行）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt..
复制链接

扫一扫