獨家手風琴

使用多個具有相同 name 的 <details> 元素建立專屬摺疊元素。

手風琴

網路上常見的使用者介面模式是摺疊元素。這個元件包含數個揭露小工具，每個小工具都可展開 (或收合) 以顯示 (或隱藏) 內容。

如要在網路上實作這種模式，請合併幾個 <details> 元素，並通常以視覺方式進行分組，表示這些元素屬於同一群組。

獨家手風琴

摺疊式模式的變化版本是「獨有的組合」，此模式只能同時開啟其中一個揭露事項小工具。

您現在可以在 <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>

一個網頁可以有多個專屬手臂。每當您在 <details> 元素上使用新的 name 值，系統就會建立新的邏輯群組。

請注意，屬於專屬功能表的 <details> 元素不一定要是同層級。可在文件中分散。這個 name 屬性會將這些類別分組，而非 DOM 順序。

聚集專屬手風琴

透過下列 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 程式碼沒有作用。以漸進式強化來說，這是可接受的行為。