折叠面板 与 弹窗面板

这里的折叠面板使用了details和summary标签；弹窗面板使用了popovertarget和popovertargetaction属性

CSS代码

/* 折叠面板 */
details {
    width: 200px;
    background-color: black;
    color: white;
    font-size: 12px;
    padding: 10px;
    border-radius: 4px;
}

summary {
    font-size: 16px;
}

details[open] summary {
    margin-bottom: 10px;
}

/* 弹窗面板 */
#popup {
    width: 200px;
    height: 80px;
    position: absolute;
    top: 30px;
    left: 0;
    margin: 0 auto;
    background-color: rgb(50, 50, 50);
    color: #fff;
    animation: slide 0.25s ease-out;
    padding: 10px;
}

.close-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

@keyframes slide {
    from {
        transform: translateY(-100px);
    }
}

HTML代码

<!-- 折叠面板 -->
<details>
    <summary>Heading</summary>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
</details>

<div style="margin: 50px 0;"></div>

<!-- 弹窗面板 -->
<button popovertarget="popup">Open Popup</button>

<div id="popup" popover> <!-- id="popup" 要对应 popovertarget 的值 -->
    This is a popup!
    <button class="close-btn" popovertarget="popup" popovertargetaction="hide">Close</button>
</div>