利用现代 HTML 和 CSS 打造增强型无障碍手风琴组件原生 HTML：手风琴在本文中，我们将重新审视<detail

原生 HTML：手风琴

在本文中，我们将重新审视<details>并充分利用现代 CSS 属性来完善您的手风琴。我还将分享一个演示实现来展示这些功能。

基础知识：`<details>`和`<summary>`

该<details>元素提供了一种在 HTML 中创建可切换部分的原生方法，元素<summary>充当可点击标签。这样可以轻松创建公开小部件，且工作量极小。

这是一个简单的例子：

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

单击摘要可切换相关内容的可见性。无需 JavaScript！

增强功能：独家开放行为

为了模仿传统的折叠行为（一次只打开一个部分），您可以name在<details>元素上使用属性。当<details>元素共享相同的时name，打开一个元素会自动关闭组中的其他元素。

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 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之间平滑过渡。但是，目前仅在 Chrome 中支持此功能。height: 0``height: auto
可见性转换：此transition-behavior属性确保可见性变化看起来无缝。

演示：将所有内容整合在一起

以下是完整实现：

浏览器支持

interpolate-size：目前仅支持Chrome。
transition-behavior：大多数现代浏览器都支持。

对于不支持的浏览器，动画会优雅地回退，并且手风琴仍然能够正常运作，即使没有平滑的过渡。

结论

<details>和元素<summary>与现代 CSS 相结合，为创建交互式手风琴面板提供了一种轻量且易于访问的解决方案。这些新的增强功能使它们对现代网络项目更具吸引力。试用演示版，让您的手风琴面板焕然一新、更加精致！

原生 HTML（共 7 部分）

【智答专家】您身边免费的GPT4.0人工智能Ai助手，免翻！！！无套路！国内直连，支持文本生成、问答、多语言支持、个性化建议、图片生成、代码纠正等等。 t.aizdzj.com/?p=MTAwNzE2…

利用现代 HTML 和 CSS 打造增强型无障碍手风琴组件