獨家手風琴

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

Bramus

手風琴

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

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

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

專屬摺疊式面板

Browser Support

• 120
• 120
• 130
• 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 建立多個專屬摺疊式面板。

專屬 Accordion 中的 <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 程式碼不會執行任何操作。就漸進式增強而言，這是可接受的行為。