使用 HTML details 元素建立獨佔手風琴

<details> 元素的 name 屬性很快將得到所有主流瀏覽器的支援。Firefox 130 也應該會支援該屬性，這將使大多數引擎僅使用 <details> 元素來處理常見的 UI 手風琴模式。對於一直以來從頭開始編寫這些用例自定義處理方式的開發者來說，這是一個好訊息。讓我們透過一些簡單的示例來探索該屬性的功能。

注意： 此功能已在 Chrome 120、Safari 17.2 中穩定支援，並在 Firefox Nightly 中啟用，因此您現在就可以開始嘗試了。

更新（2025 年 4 月）： 自 Firefox 130 起，此功能已在穩定版釋出中預設啟用。

`<details>` 是如何工作的？

如果您不熟悉 <details>，它是一個建立“可展開小部件”的元素，其中資訊僅在小部件切換到“開啟”狀態時可見。您應該在其中包含一個 <summary> 元素，該元素用於描述該可展開內容的文字。如果您省略 <summary>，則預設會使用特定於瀏覽器的字串，例如“Details”。點選下面的兩個元素，將它們在開啟和關閉狀態之間切換，並注意第一個元素中缺少 <summary>。

html

<details>
  <p>
    The response phrase for 413 "Content Too Large" used to be "Payload Too
    Large", and this message is still widely used.
  </p>
</details>

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

由於手風琴是一系列可展開的區域，允許使用者顯示或隱藏內容，因此可以使用一系列 <details> 元素來建立類似手風琴的介面。透過使用 name 屬性（我們稍後將看到），這些元素可以非常接近地模仿常見手風琴的行為，即一次只能開啟一個區域，當展開一個新區域時，其他區域會自動關閉。

<details> 元素在您的頁面上具有巨大的潛力，因為一些最小的樣式可以大大提高效果，僅使用 HTML 和 CSS 即可建立互動式手風琴。

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

html

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details>
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details>
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

使用 `<details name>` 建立獨佔手風琴

手風琴的一個常見用例是，一次應該只有一個區域是開啟的。新增 name 屬性可以讓您連線多個 <details> 元素並建立一個獨佔的手風琴，因此任何時候只能開啟一個具有相同名稱的 <details> 元素，並且瀏覽器會將所有其他具有相同名稱的元素切換到“關閉”狀態。當您想要對多個 <details> 元素進行分組並確保獨佔性時，能夠包含此功能非常方便。

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

html

<details name="tech-specs">
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

常見問題解答 (FAQ) 是這類獨佔手風琴的一個很好的用例，訪客可以一次專注於一個主題。

details {
  font-family: sans-serif;
  width: 50%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  margin: 0.5rem;
}

details:hover {
  box-shadow: 2px 2px 2px 1px #e6e6e6;
}

summary {
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}

p {
  padding: 1rem;
  margin: 0;
  background-color: #e6e6e6;
}

html

<details name="faq">
  <summary>Can I request a refund?</summary>
  <p>
    Yes, you have up to 30 days to request a refund. See our T&C for details.
  </p>
</details>

<!-- etc. -->

<details name="faq">
  <summary>What data do you store?</summary>
  <p>
    We use some anonymized visitor stats for the purpose of improving the
    service reliability. See our Privacy Policy for more information.
  </p>
</details>

<details name="faq">
  <summary>Are all products organic?</summary>
  <p>
    We do our best to ensure all ingredients are organic, but some exceptions
    are listed on each product page under "ingredients".
  </p>
</details>

總結

隨著更多穩定版瀏覽器開始支援此功能，這表明 Web 平臺正在為 Web 開發者以前需要自行編寫的功能提供更好的支援。如果您正在尋找一個 polyfill，Bramus 有一篇很棒的文章，其中包含一個針對尚不支援此功能的瀏覽器的 polyfill。

希望您喜歡這篇博文，並且能夠從 <details> 元素中獲得更多價值，它是一個靈活且有用的元素，適用於許多場景。如果您有任何想法或認為我遺漏了什麼，請隨時與我們聯絡。不要在 <details> 中迷失太久，盡情享受吧！

<details> 是如何工作的？

使用 <details name> 建立獨佔手風琴

延伸閱讀

總結

`<details>` 是如何工作的？

使用 `<details name>` 建立獨佔手風琴