使用 HTML details 元素创建独占手风琴

<details> 元素的 name 属性很快将得到所有主流浏览器的支持。Firefox 130 也应该会支持该属性，这将使大多数引擎仅使用 <details> 元素来处理常见的 UI 手风琴模式。对于一直以来从头开始编写这些用例自定义处理方式的开发者来说，这是一个好消息。让我们通过一些简单的示例来探索该属性的功能。

注意： 此功能已在 Chrome 120、Safari 17.2 中稳定支持，并在 Firefox Nightly 中启用，因此您现在就可以开始尝试了。

更新（2025 年 4 月）： 自 Firefox 130 起，此功能已在稳定版发布中默认启用。

`<details>` 是如何工作的？

如果您不熟悉 <details>，它是一个创建“可展开小部件”的元素，其中信息仅在小部件切换到“打开”状态时可见。您应该在其中包含一个 <summary> 元素，该元素用于描述该可展开内容的文本。如果您省略 <summary>，则默认会使用特定于浏览器的字符串，例如“Details”。点击下面的两个元素，将它们在打开和关闭状态之间切换，并注意第一个元素中缺少 <summary>。

html

<details>
  <p>
    The response phrase for 413 "Content Too Large" used to be "Payload Too
    Large", and this message is still widely used.
  </p>
</details>

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

由于手风琴是一系列可展开的区域，允许用户显示或隐藏内容，因此可以使用一系列 <details> 元素来创建类似手风琴的界面。通过使用 name 属性（我们稍后将看到），这些元素可以非常接近地模仿常见手风琴的行为，即一次只能打开一个区域，当展开一个新区域时，其他区域会自动关闭。

<details> 元素在您的页面上具有巨大的潜力，因为一些最小的样式可以大大提高效果，仅使用 HTML 和 CSS 即可创建交互式手风琴。

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

html

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details>
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details>
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

使用 `<details name>` 创建独占手风琴

手风琴的一个常见用例是，一次应该只有一个区域是打开的。添加 name 属性可以让您连接多个 <details> 元素并创建一个独占的手风琴，因此任何时候只能打开一个具有相同名称的 <details> 元素，并且浏览器会将所有其他具有相同名称的元素切换到“关闭”状态。当您想要对多个 <details> 元素进行分组并确保独占性时，能够包含此功能非常方便。

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

html

<details name="tech-specs">
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

常见问题解答 (FAQ) 是这类独占手风琴的一个很好的用例，访客可以一次专注于一个主题。

details {
  font-family: sans-serif;
  width: 50%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  margin: 0.5rem;
}

details:hover {
  box-shadow: 2px 2px 2px 1px #e6e6e6;
}

summary {
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}

p {
  padding: 1rem;
  margin: 0;
  background-color: #e6e6e6;
}

html

<details name="faq">
  <summary>Can I request a refund?</summary>
  <p>
    Yes, you have up to 30 days to request a refund. See our T&C for details.
  </p>
</details>

<!-- etc. -->

<details name="faq">
  <summary>What data do you store?</summary>
  <p>
    We use some anonymized visitor stats for the purpose of improving the
    service reliability. See our Privacy Policy for more information.
  </p>
</details>

<details name="faq">
  <summary>Are all products organic?</summary>
  <p>
    We do our best to ensure all ingredients are organic, but some exceptions
    are listed on each product page under "ingredients".
  </p>
</details>

总结

随着更多稳定版浏览器开始支持此功能，这表明 Web 平台正在为 Web 开发者以前需要自行编写的功能提供更好的支持。如果您正在寻找一个 polyfill，Bramus 有一篇很棒的文章，其中包含一个针对尚不支持此功能的浏览器的 polyfill。

希望您喜欢这篇博文，并且能够从 <details> 元素中获得更多价值，它是一个灵活且有用的元素，适用于许多场景。如果您有任何想法或认为我遗漏了什么，请随时与我们联系。不要在 <details> 中迷失太久，尽情享受吧！

<details> 是如何工作的？

使用 <details name> 创建独占手风琴

延伸阅读

总结

`<details>` 是如何工作的？

使用 `<details name>` 创建独占手风琴