探索實用的詳細資料和摘要元素的運作方式,以及使用位置。
揭露小工具是一種使用者介面控制項,可以隱藏及顯示內容。如果您在 web.dev 上閱讀此內容,且可視區域的寬度低於 106 em,按一下段落上方的「On this page」,即可查看這個部分的目錄內容。如果找不到這個圖示,請縮小瀏覽器,並以揭露小工具的形式顯示這個頁面中的目錄導覽項目。
「摺疊元素」圖形使用者介面是一系列垂直堆疊的揭露小工具。摺疊式使用者介面常見用途是許多網站上的常見問題 (FAQ) 網頁。 「摺疊常見問題常見問題」包含可見的問題清單;按一下問題即可展開,或是「揭露」對於該問題的回答。
jQuery 至少自 2009 年起就加入了摺疊式使用者介面模式。原始不含 JavaScript 的摺疊式解決方案包括:將每個常見問題問題設為 <label>
,然後加上有標示的勾號,勾選勾號後顯示 <div>
答案。CSS 看起來會像這樣:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
為什麼歷史初衷?沒有 JavaScript 或表單控制入侵的揭露小工具等揭露小工具是相對最近的新增項目,自 2020 年 1 月起,只有所有新型瀏覽器都完整支援 <details>
和 <summary>
元素。您現在可以只使用語意 HTML 建立可正常運作,但比使用語意式 HTML 的揭露小工具更缺乏吸引力。您只需要 <details>
和 <summary>
元素即可:這些元素是處理展開和收合內容的內建方式。當使用者按一下或輕觸 <summary>
,或在 <summary>
處於焦點時放開 Enter 鍵,畫面上就會顯示父項 <details>
切換鈕的內容!
如同所有語意內容,您可以逐步改善預設功能和外觀。在本例中,我們新增了 一小部分的 CSS
請注意,這些 Codepens 不包含 JavaScript。
切換顯示設定:open
屬性
<details>
元素是揭露小工具容器。<summary>
是其父項 <details>
的摘要或圖例。系統一律會顯示摘要,可做為按鈕顯示,切換父項的其餘內容顯示方式。與 <summary>
互動時,您可以切換 <details>
元素的 open
屬性,藉此切換顯示自行加上標籤的摘要同層級畫面。
open
屬性是布林值屬性。如果有顯示,不論值是否存在,都代表已向使用者顯示所有 <details>
內容。如果沒有 open
屬性,則只會顯示 <summary>
的內容。
由於使用者與控制項互動時,系統會自動新增和移除 open
屬性,因此在 CSS 中可以使用該屬性,根據元素狀態以不同的樣式設定元素樣式。
您可以使用多個 <details>
元素清單建立摺疊元素,每個元素都有 <summary>
子項。在 HTML 中省略 open
屬性表示 <details>
全都會收合或關閉,而且在網頁載入時只會顯示摘要標題;每個標題都是父項 <details>
中其餘內容的開放文字。如果您在 HTML 中加入 open
屬性,<details>
會在網頁載入時展開並顯示內容。
某些瀏覽器只能搜尋收合狀態的隱藏內容,即使收合的內容並非 DOM 的一部分也一樣。如果在 Edge 或 Chrome 中搜尋,系統會展開包含搜尋字詞的詳細資料,並顯示結果。Firefox 或 Safari 不會複製這種行為。
<summary>
必須是 <details>
元素的第一個子項,代表其巢狀結構的父項 <details>
元素中其他內容的摘要、說明文字或圖例。<summary>
元素的內容可以是任何適用於段落中的標題內容、純文字或 HTML。
切換摘要標記
在兩個先前的 Codepens 中,您會注意到摘要中 inline-start 的箭頭。揭露事項通常會在螢幕上使用一個小三角形旋轉 (或扭轉),表示已開啟/關閉狀態,並在三角形旁顯示標籤。<summary>
元素的內容會為揭露小工具加上標籤。每個區段頂端的旋轉箭頭都是針對 <summary>
元素設定的 ::marker
。與清單項目一樣,<summary>
元素支援 list-style
快速屬性及其長屬性,包括 list-style-type
。您可以透過 CSS 設定揭露聲明三角形樣式,包括將三角形使用的標記變更為其他項目符號類型,包括採用 list-style-image
的圖片。
如要套用其他樣式,請使用與 details summary::marker
類似的選取器。::marker
虛擬元素只接受部分樣式。移除 ::marker
並替換為較簡單的 ::before
是常見的做法,而 CSS 樣式會根據開放屬性的顯示情況 (或缺少) 稍微變更產生內容的樣式。如要移除揭露小工具圖示,您可以設定 list-style: none
,或將標記的內容設為 none
,但請一律加入視覺指標,告知使用者摘要內容是啟用時顯示及隱藏內容的切換鈕。
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
本範例會移除預設標記,並新增產生的內容,在詳細資料關閉時建立 +
,並在詳細資料開啟時建立 -
。
如果想將詳細資料區塊預設為開啟,請在 <details>
開頭標記中加入 open
屬性。您也可以在每個對話方塊之間加入空格,並為含有產生的內容建立的標記轉換旋轉,藉此改善外觀:
錯誤的處理方式
如果您沒有加入 <summary>
,瀏覽器會為您建立一個:有標記和「details」字樣。這項摘要屬於「陰影根」的一部分,因此不會套用作者 CSS 摘要樣式。遺憾的是,Safari 不會在鍵盤焦點順序中加入詳細資料。
如果您加入 <summary>
,但不是 <details>
中的第一個元素,瀏覽器仍會照常顯示摘要。此外,如果您在摘要中加入連結、標籤或其他互動式元素,這項做法也不會失敗,但瀏覽器對互動式內容的處理方式不同。舉例來說,如果您在摘要中加入連結,部分瀏覽器會同時新增摘要和預設分頁順序連結,但其他瀏覽器預設不會聚焦於該連結。如果按一下 <summary>
中的巢狀 <label>
,部分瀏覽器會將焦點放在相關聯的表單控制項;其他瀏覽器則會將焦點移至表單控制項,並將 <details>
切換為開啟或關閉。
HTMLDetailsElement
介面
和所有 HTML 元素一樣,HTMLDetailsElement
繼承了 HTMLElement
的所有屬性、方法和事件,並新增 open
執行個體屬性和 toggle
事件。HTMLDetailsElement.open
屬性是反映 open
HTML 屬性的布林值,用來指出是否要向使用者顯示元素的內容 (不含 <summary>
)。當 <details>
元素開啟或關閉時,就會觸發切換事件。您可以使用 addEventListener()
監聽這個事件。
如要編寫指令碼,在使用者開啟其他詳細資料時關閉已開啟的詳細資料,請使用 removeAttribute("open")
移除開啟的屬性:
這是唯一使用 JavaScript 的範例。除了關閉其他開啟揭露小工具的功能以外,您可能不需要 JavaScript。
提醒您,<details>
和 <summary>
的樣式設定非常大,甚至還能用來建立工具提示。不過,如果您要將這些語意元素用於原生語意不相符的用途,請務必維持無障礙功能。大部分的網頁都有預設可存取的 HTML。我們身為開發人員的職責是確保內容不會被使用者存取。
隨堂測驗
測驗您對詳細資料和摘要的瞭解程度。
<summary>
必須是哪個元素的第一個子項?
<p>
<details>
<fieldset>