獨家手風琴

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

Bramus

手風琴

網頁上常見的 UI 模式是摺疊式元件。這個元件包含多個揭露小工具，可個別展開 (或摺疊) 揭露 (或隱藏) 內容。

如要在網頁上實作這個模式，您可以結合幾個 <details> 元素，並通常以視覺方式將這些元素分組，以表示它們屬於同一組。

示範：使用 HTML 和 CSS 製作 Accordion。

專屬手風琴

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：130。
  • Safari：17.2。

摺疊式模式的變化版本是專屬摺疊式，其中只能同時開啟一個展開式小工具。

如要在網站上建立專屬的摺疊式選單，請在 <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 順序。

聚合專屬摺疊元素

您可以使用下列 JavaScript 為專屬摺疊式選單的行為進行 polyfill。程式碼會依賴 <details> 元素的 toggle 事件。

當含有 name 的 <details> 元素開啟時，程式碼會找出其他開啟的 <details> 元素，並關閉這些元素的 name 屬性。

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 程式碼不會執行任何操作。以漸進式增強來說，這是可接受的行為。