使用多個具有相同 name
的 <details>
元素建立專屬摺疊元素。
手風琴
網路上常見的使用者介面模式是摺疊元素。這個元件包含數個揭露小工具,每個小工具都可展開 (或收合) 以顯示 (或隱藏) 內容。
如要在網路上實作這種模式,請合併幾個 <details>
元素,並通常以視覺方式進行分組,表示這些元素屬於同一群組。
獨家手風琴
瀏覽器支援
- 120
- 120
- x
- 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>
一個網頁可以有多個專屬手臂。每當您在 <details>
元素上使用新的 name
值,系統就會建立新的邏輯群組。
請注意,屬於專屬功能表的 <details>
元素不一定要是同層級。可在文件中分散。這個 name
屬性會將這些類別分組,而非 DOM 順序。
聚集專屬手風琴
透過下列 JavaScript,您可以針對專屬摺疊行為進行 polyfill 的行為。程式碼依賴 <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 程式碼沒有作用。以漸進式強化來說,這是可接受的行為。