独家手风琴

创建一个包含具有相同 name 的多个 <details> 元素的独占手风琴。

布拉穆斯

Twitter GitHub Mastodon 首页

手风琴

网络上常见的界面模式是手风琴式折叠组件。这是一个由多个披露声明 widget 组成的组件，这些 widget 可以分别展开（或收起）以显示（或隐藏）其内容。

如需在网页上实现此模式，您需要组合一些 <details> 元素，通常在视觉上将它们分组，以表明它们属于一起。

演示：使用 HTML 和 CSS 的手风琴式折叠。

独家手风琴

浏览器支持

• 120
• 120
• x
• 17.2

手风琴式折叠模式的一种变体是独占手风琴，在这种模式中，一次只能打开一个披露声明 widget。

为了在 Web 上实现这一点，您现在可以向 <details> 元素中添加 name 属性。使用此属性时，具有相同 name 值的多个 <details> 元素会形成语义组，并且这些元素的行为方式就像排他性的手风琴。当您打开组中的某个 <details> 元素时，之前打开的那个元素将自动关闭。

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

演示：包含 HTML 和 CSS 的独家手风琴。

一个网页中可以有多个独占手风琴。每当对 <details> 元素使用新的 name 值时，系统都会创建一个新的逻辑组。

演示：多个包含 HTML 和 CSS 的专属手风琴。

请注意，独占手风琴中的 <details> 元素不一定是同级。它们可能分散在文档中。对它们进行分组的是 name 属性，而不是它们的 DOM 顺序。

Polyfill 专用手风琴

通过以下 JavaScript，您可以对独占手风琴的行为执行 polyfill 操作。该代码依赖于 <details> 元素的 toggle 事件。

当具有 name 的 <details> 元素打开时，代码会查找具有相同 name 属性值的其他处于打开状态的 <details> 元素并将其关闭。

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

某些旧版浏览器不会触发此 toggle 事件。在这些浏览器中，polyfill 代码不会执行任何操作。就渐进式增强而言，这是可接受的行为。