修復詳細信息元素

html5 <details></details>元素提供了一種創建可折疊內容的簡潔方法，但它提出了一個重要的可用性挑戰：針對崩潰的部分中的內容的哈希鏈接未能透露該內容。本文詳細介紹了一種逐步增強的JavaScript解決方案，包括用於缺乏本機支持的瀏覽器的可訪問的多填充，以解決此問題。 <details></details>>

鑰匙要點：

1. 元素雖然有用，但卻遇到了針對隱藏內容的哈希鏈接的可用性問題。 <details></details>
polyfill有效地模擬不支持的瀏覽器的功能。
2. 當哈希鏈接指向倒塌區域內的元素時，多填充的有效性被損害。 該頁面保留在頂部，遮蓋了目標。 <details></details>遞歸函數通過自動擴展相關的
元素來解決這一問題。
4. <details></details>

<details></details>元素與

>元素配對，創建可折疊的內容。 （如果存在）必須是第一個或最後一個孩子；所有其他內容都是可折疊的。

屬性迫使內容最初可見。 目前，只有Chrome完全支持<details></details>。 下圖說明了Chrome的渲染：<summary></summary> <summary></summary>open <details></details>

創建一個polyfill

基本的多填充通過>屬性檢測天然支持。 本機實現不需要手冊屬性更新，但是ARIA屬性仍然需要管理。 典型的結構看起來像：

open腳本管理open屬性，並將其用作視覺崩潰的CSS選擇器：

<details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details>

包裝aria-expanded簡化了管理

和

details > div[aria-expanded="false"] {
  display: none;
}

屬性，尤其是對於像IE7這樣的舊瀏覽器，需要其他樣式處理。

>函數處理鍵盤中的瀏覽器不一致點擊事件觸發：<div> aria-expanded displayaddClickEvent突出顯示哈希問題

function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}

核心問題是當哈希鏈接（例如＃首先要素）靶向崩潰區域內的元素時出現的。該頁面不滾動到目標；它保持在頂部，使目標隱藏。

修復哈希問題

<details>

遞歸

函數解決了以下問題：

<details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details>

此函數遞歸擴展了包含目標的任何祖先<details></details>元素。 在頁面加載中為location.hash和內部鏈接單擊。 為了確保可靠的滾動，在擴展後使用window.scrollBy，將目標定位在視口內。 保持原始的location.hash行為（在頁面刷新上沒有自動滾動）。

>

結論

這個增強的解決方案，稱為“綜合”，超出了基本的多填充。它提高了所有瀏覽器的可用性和可訪問性，解決了<details></details>>元素的固有局限性。

經常詢問有關HTML詳細信息元素的問題（常見問題解答） （原始輸入的FAQ部分保持不變。）

以上是修復詳細信息元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！