使用具有相同 name 的多個 <details> 元素，建立專屬的摺疊式選單。
手風琴
網頁上常見的 UI 模式是摺疊式元件。這個元件包含多個揭露小工具，可個別展開 (或摺疊) 揭露 (或隱藏) 內容。
如要在網頁上實作這個模式，您可以結合幾個 <details> 元素，並通常以視覺方式將這些元素分組，以表示它們屬於同一組。
專屬摺疊式面板
Browser Support
摺疊式模式的變化版本是專屬摺疊式，其中一次只能開啟一個展開小工具。
如要在網站上建立專屬的摺疊式選單，請在 <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 值時，系統就會建立新的邏輯群組。
專屬 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 程式碼不會執行任何操作。就漸進式增強而言，這是可接受的行為。