修复详细信息元素

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中文网其他相关文章！