原生HTML：折叠面板的再探讨-原创手记-慕课网

六年前，我探索了原生的 <details> 和 <summary> 元素，以创建手风琴式折叠。从那以后，网络平台不断发展，带来了许多令人兴奋的新功能，例如 独特的展开行为 和 流畅的动画效果。

## 原生 HTML 折叠面板 (Andrew Bone ・ 2019年1月4日 #html #css #a11y #设计 ](https://dev.to/link2twenty/native-html-accordion-2fma)

在这篇文章中，我们将重新审视 <details> 标签，并利用现代 CSS 属性让您的手风琴效果更加精致。我还会展示一个具体实现的演示，让您了解这些功能。

基础知识如下：详情 和 概要

<details>元素提供了一种在HTML中创建可点击切换区域的原生方法，其中<summary>元素充当可点击的标题。这使得创建可折叠区域变得简单且省力。

举个简单的例子：

    <details>
      <summary>点击查看更多</summary>
      隐藏的文本。
    </details>

进入全屏（按返回键退出全屏）

点击摘要切换相关内容的显示。无需使用JavaScript！

增强：专属开放特性

为了模仿传统手风琴一次只展开一节的行为，可以在<details>元素上使用name属性。当这些<details>元素使用相同的name时，打开一个会自动关闭其他同组元素。

    <details name="exclusive">
      <summary>第1节</summary>
      <p>第1节的内容如下。</p>
    </details>
    <details name="exclusive">
      <summary>第2节</summary>
      <p>第2节的内容如下。</p>
    </details>

进入全屏模式。退出全屏模式。

这种特性原生支持，在现代浏览器中表现完美！

加入流畅的 CSS 动画

为了使打开和关闭的过渡效果更加流畅，我们可以使用现代 CSS 属性（如 interpolate-size 和 transition-behavior 等）。

重要属性

interpolate-size ：允许在内在尺寸（如 auto）和固定大小之间进行动画。此属性目前仅在 Chrome 浏览器中支持。
transition-behavior ：当设置为 allow-discrete 时，例如 visibility 和 display 这样的属性会等待，而不是立即更新。

示例风格

以下是一个完整的CSS示例（层叠样式表），这是演示中使用的：

    details {
      interpolate-size: allow-keywords;
      overflow: clip;
      margin-top: 0.125em;
      border: 1px solid #dddddd;
      background: #ffffff;
      color: #333333;
      border-radius: 3px;
    }

    details summary {
      display: block;
      cursor: pointer;
      position: relative;
      padding: 0.5em 0.5em 0.5em 0.7em;
      background: #ededed;
      color: #2b2b2b;
      border-radius: 3px 3px 0 0;
    }

    details:not([open]) summary:hover,
    details:not([open]) summary:focus {
      background: #f6f6f6;
      color: #454545;
    }

    details[open] summary {
      outline: 1px solid #003eff;
      background: #007fff;
      color: #ffffff;
    }

    details[open]::details-content {
      height: auto;
    }

    details::details-content {
      height: 0;
      overflow-y: clip;
      transition: content-visibility 475ms allow-discrete, height 475ms;
    }

    details main {
      padding: 1em 2.2em;
    }

点击全屏。退出全屏。

它是怎么工作的：

高度变化动画：interpolate-size 属性允许在 height: 0（关闭）和 height: auto（打开）之间平滑变化。不过，但目前仅 Chrome 浏览器支持此功能。
可见性切换：transition-behavior 属性确保可见性切换无缝。

演示：整合所有内容

下面就是完整的实现

浏览器兼容性

interpolate-size: 目前仅在Chrome中可用。
transition-behavior: 大多数现代浏览器都支持。

浏览器不支持时，动画会优雅地退化为静态效果，accordion仍能正常工作，只是没有平滑切换。

最后

<details> 和 <summary> 元素结合现代 CSS 技术，为创建折叠面板或手风琴效果提供了一种轻量且易于使用的解决方案。这些新功能让它们在现代网页项目中更加吸引眼球。试试这个演示，让你的折叠面板焕然一新，看起来更加简洁优雅。

谢谢你的阅读。如果你想的话，快来我的twitter，bsky，和linkedin打个招呼吧 😊