原生 HTML：重温手风琴-css教程-PHP中文网

原生 HTML：手风琴

安德鲁·博恩・2019 年 1 月 4 日

首页

web前端

css教程

原生 HTML：重温手风琴

Mary-Kate Olsen

Jan 07, 2025 am 06:45 AM

六年前，我探索了原生的<细节>和<摘要>创建可访问的手风琴的元素。从那时起，网络平台不断发展，为这些元素引入了令人兴奋的新功能，例如独家开放行为和流畅动画。

原生 HTML：手风琴

安德鲁·博恩・2019 年 1 月 4 日

#html #css #a11y ＃设计

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

基础知识：<详细信息>和<摘要>

element 提供了一种在 HTML 中创建可切换部分的本机方法，其中

充当可点击标签的元素。这使得您可以轻松地以最小的努力创建披露小部件。

这是一个简单的例子：

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

登录后复制

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

增强功能：独有的开放行为

为了模仿传统的手风琴行为（一次仅打开一个部分），您可以在

上使用 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：允许在固有尺寸（如自动）和固定尺寸之间进行动画处理。 此属性目前仅在 Chrome 中受支持。
transition-behavior：当设置为允许离散时，通常无法进行动画处理的属性（如可见性和显示）会等待而不是立即更新。

样式示例

这是演示中使用的 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;
}

登录后复制