details 和 summary 元素提供什么功能？

Question

Accepted Answer

`

` 和 `

` 创建一个**原生disclosure widget**——可展开/可折叠的部分——**无需任何JavaScript**。浏览器会为您处理切换、键盘支持和无障碍访问。 ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** 是可点击标签（第一个子元素）。 - 其后的所有内容都是可折叠的内容。 - 点击summary可以切换open/closed状态——原生支持键盘操作（Enter/Space），屏幕阅读器也能正确识别。 ## 默认打开和检测状态 ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## 样式化指示器 ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## 真实用例 FAQ手风琴、"查看更多"部分、可折叠侧边栏、剧透文本、可展开的表格行。在这个元素出现之前，每个手风琴都需要JavaScript加ARIA配置才能实现无障碍访问——现在只需两个语义标签。 ## 为什么这很重要 `

`/`

` 让您能轻松创建可访问、键盘友好的可折叠内容，无需JS和手工ARIA——这是充分利用平台的完美示例。在构建自定义手风琴之前，优先考虑将其用于FAQ和"查看更多"模式。