独家手风琴

使用具有相同 name 的多个 <details> 元素创建专属手风琴。

手风琴

Web 上常见的界面模式是手风琴式组件。此组件由多个披露微件组成,可以分别展开(或收起)以显示(或隐藏)其内容。

如需在网页上实现此模式,您需要组合几个 <details> 元素,并且通常将它们以可视化方式分组,以表明它们是一起的。

<ph type="x-smartling-placeholder">
</ph>
演示:使用 HTML 和 CSS 的手风琴。

独家手风琴

浏览器支持

  • Chrome:120。 <ph type="x-smartling-placeholder">
  • 边缘:120。 <ph type="x-smartling-placeholder">
  • Firefox:130。 <ph type="x-smartling-placeholder">
  • Safari:17.2. <ph type="x-smartling-placeholder">

手风琴模式的一种变化是专属手风琴式折叠,在这种模式下,用户只能同时打开其中一个披露微件。

为了在 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>
<ph type="x-smartling-placeholder">
</ph>
演示:独家手风琴式 HTML 和 CSS。

一个页面上可以包含多个专属手风琴。每当您对 <details> 元素使用新的 name 值时,系统都会创建一个新的逻辑组。

<ph type="x-smartling-placeholder">
</ph>
演示:包含 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 代码不会执行任何操作。对于渐进式增强,这属于可接受行为。