HTML 手风琴组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>手风琴</title>
        <style>
            .box {
                max-width: 500px;
                margin: 5% auto;
                border: 2px solid #aaaaaa;
            }
            .item .header {
                padding: 10px 0;
                background-color: #dddddd;
                cursor: pointer;
                user-select: none;
                text-align: center;
            }
            .item.active .header {
                background-color: #cccccc;
            }
            .item.active .body {
                padding: 10px;
                height: 100px;
                text-align: justify;
            }
            .item .body {
                transition: all .3s;
                overflow: auto;
            }
            .item:not(:last-child) {
                border-bottom: 2px solid #aaaaaa;
            }
            .item:not(.active) .body {
                height: 0;
            }
        </style>
    </head>
    <body>
        <!-- cmd /c start chrome --app=$(FULL_CURRENT_PATH) -->
        <div class="box">
            <div class="item active">
                <div class="header">选项一</div>
                <div class="body">
                    从前有一个公主，她是胖国王和瘦皇后的女儿。
                    最近她好像怪怪的，先是把橘子当成网球打，喷的大家一脸橘子汁。
                    又把小羊当成小狗，拿着骨头喂羊吃。
                    还把外婆当成了皇后，公主说:“她们的头发看起来一模一样嘛！”
                </div>
            </div>
            <div class="item">
                <div class="header">选项二</div>
                <div class="body">
                    接着，公主把7看成了9，搭错了公交车。
                    上课时，又把3看成8，惹得全班哈哈大笑。
                    公主心里很难过，不知道要怎么办。
                    皇后找了医生来，医生说:“公主可能有点近视，也有点闪光哦！我来帮她仔细检查看看。”
                </div>
            </div>
            <div class="item">
                <div class="header">选项三</div>
                <div class="body">
                    国王说:“难怪公主最近常说眼睛累，看东西都凑得很近。”
                    皇后说:“难怪公主常揉眼睛，也常眯着眼看东西。”
                    医生说:“公主一定常常在灯光不足的地方看书；
                    躺着看书看太久；
                </div>
            </div>
            <div class="item">
                <div class="header">选项四</div>
                <div class="body">
                    还有，电视看太久也不休息。”
                    检查后，医生说:“还好，公主只是假性近视，多让眼睛休息就好了。不过，公主还有散光，得先戴眼镜纠正一下。”
                    公主试了半天，终于找到了一副自己喜欢的眼镜。
                    公主带上了粉红色的小眼镜，哇！东西看的好清楚哟。
                </div>
            </div>
        </div>
        <script>
            const itemEles = document.querySelectorAll('.item')
            const headerEles = document.querySelectorAll('.header')
            headerEles.forEach((headerEle, index) => {
                headerEle.addEventListener('click', () => {
                    document.querySelector('.item.active').classList.remove('active')
                    itemEles[index].classList.add('active')
                })
            })
        </script>
    </body>
</html>
已有 3 条评论

添加新评论
