獨家手風琴

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

手風琴

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

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

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

獨家致敬

瀏覽器支援

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