瞭解實用細節和摘要元素的運作方式,以及說明 以便使用。
揭露小工具是一種使用者介面控制項,可用於隱藏及顯示內容。如果您是在 web.dev 上讀取這項資訊,且 可視區域寬度小於 106 em,請按一下 [在這個頁面上]上方顯示的是 本節如果沒看到,請將瀏覽器縮小以檢視此網頁上的目錄內容表格 揭露聲明小工具。
摺疊圖形使用者介面是一系列垂直堆疊的 揭露小工具。摺疊式使用者介面常見的用途是許多網站的「常見問題」(FAQ) 網頁。 摺疊式常見問題包含可見問題清單;按一下問題即可展開 (或「揭露」)。
jQuery 至少包含 2009 年起的摺疊式 UI 模式。不含 JavaScript 的原始版本
摺疊式解決方案包括讓每個常見問題問題成為 <label>
,後面加上勾號,然後顯示 <div>
。CSS 看起來會像這樣:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
為何要記錄歷史?沒有 JavaScript 或表單控制遭駭的做法等揭露小工具是相對新穎的
新增;<details>
和<summary>
元素。你現在可以建立功能了,但其實更少
而不是只用語意 HTML 達到引人注目的揭露小工具。您只需要 <details>
和 <summary>
元素即可:兩者是內建的處理方法
可展開及收合內容當使用者點選或輕觸 <summary>
,或是在執行以下動作時放開 Enter 鍵
<summary>
有焦點,系統會顯示父項 <details>
切換按鈕的內容!
如同所有語意內容,您可以逐步強化預設功能和外觀。在這個例子中 新增 CSS,但沒有其他任何內容:
請注意,這些 Codepens 不包含 JavaScript。
切換顯示設定:open
屬性
<details>
元素是揭露聲明小工具容器。<summary>
是其父項 <details>
的摘要或圖例。
摘要 始終顯示,充當按鈕,可切換顯示父項內容的其他部分。互動
使用 <summary>
時,可切換顯示 <details>
元素的 open
屬性。
open
屬性是布林值屬性。如果有值或缺少值,表示所有 <details>
向使用者顯示的內容如果沒有 open
屬性,則只會顯示 <summary>
的內容。
open
屬性會在使用者與控制項互動時自動新增及移除,因此可在 CSS 中使用
根據元素狀態,調整元素的樣式。
您可以建立具有多個 <details>
元素的清單,每個元素都有一個 <summary>
子項。省略 open
屬性
表示 <details>
會是收合或關閉,但在網頁載入時只會顯示摘要標題。
每個標題都可做為父項 <details>
中其餘內容的開放式。如果您在 HTML 中加入 open
屬性,<details>
會在載入頁面時展開顯示內容,同時顯示內容。
部分瀏覽器只能搜尋處於收合狀態的隱藏內容,即使隱藏內容也一樣 並非 DOM 的一部分在 Edge 或 Chrome 中搜尋時,系統會展開顯示含有搜尋字詞的詳細資料 系統不會在 Firefox 或 Safari 中複製這個行為。
<summary>
必須是 <details>
元素的第一個子項,代表其餘的摘要、說明文字或圖例
的上層元素內容。<details>
<summary>
元素的內容可以是任何標題
可在段落中使用的一種內容、純文字或 HTML。
切換摘要標記
在先前的兩個 Codepens 中,您會看到 inline-start 箭頭
摘要部分揭露聲明小工具通常會使用可旋轉 (或扭曲) 的小三角形圖示
表示處於營業/關閉狀態,且三角形旁邊有標籤。揭露小工具的 <summary>
元素內容標籤。
每個部分頂端的旋轉箭頭都是 ::marker
,
<summary>
元素。如同清單項目,<summary>
元素支援 list-style
簡寫屬性及長途屬性,包括 list-style-type
。
你可以使用 CSS 設定揭露三角形的樣式,包括將使用的標記從三角形變更為其他項目符號類型,包括:
帶有 list-style-image
的圖片。
如要套用其他樣式,請使用與 details summary::marker
類似的選取器。
::marker
pseudo-element 只接受有限的樣式。移除
::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>
必須是哪個元素的第一個子項?
<details>
<p>
<fieldset>