獨家手風琴

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

Bramus

手風琴

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

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

示範：搭配 HTML 和 CSS 使用手中功能。

獨家致敬

瀏覽器支援

• 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 做出多項獨家案例。

請注意，隸屬於專屬指令中的 <details> 元素不一定要是同層級元素。也可以散佈在文件中。name 屬性是用來將群組分組，而不是 DOM 順序。

聚合專屬摺疊元素

透過下列 JavaScript，您可以對獨家摺法的行為進行聚填。程式碼需要使用 <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 程式碼不會有任何作用。以漸進式增強來說，這是可接受的行為。