HTML 教程 / 使用 details 和 summary 创建可展开内容
details 和 summary 创建的内容，允许用户展开或折叠，而无需编写 JavaScript。它们适用于可选说明、较长的指南或用户在需要时查看的答案。
创建一个简单的可折叠面板
<details>
<summary>显示营业时间</summary>
<p>我们周一至周五的营业时间是9:00至18:00。</p>
</details>将代码插入到HTML文档的body中，并在浏览器中打开它。最初只会显示“显示营业时间”。使用鼠标、触摸或键盘激活此文本以显示段落；再次激活它以关闭。将 summary 作为 details 的第一个子元素。浏览器提供基本的展开状态和交互；仅为实现展开与收起，不需要另外编写脚本。
标记和边框可能因浏览器或CSS样式而有所不同。重要的是标签保持清晰，内容可以打开和关闭，并且键盘焦点保持可见。
首先显示内容
如果希望面板在开始时显示为打开状态，请添加属性 open。用户仍然可以关闭并重新打开它。布尔存在规则也在 HTML 语法 中通过 checked 进行了演示。
<details open>
<summary>配送信息</summary>
<p>配送时间因地区而异。</p>
</details>open 是一个布尔属性。写入 open="false" 会使该属性始终存在，并在开始时打开面板。完全删除该属性以从关闭状态开始。不要隐藏任何每个人都必须阅读的条件，就好像它只是可选的附加信息一样。
选择有用的标签
多个details元素可以同时出现，但每个summary必须明确标识它显示的内容。重复使用“更多信息”会使这些元素难以区分。一个常见问题可以符合这种模式，但如果其答案简短且立即有用，普通可见文本对读者来说可能更快。
使用键盘和窄屏幕测试结果。MDN 的 details 元素文档介绍了其结构与属性。
检查键盘操作和初始状态
- 再次打开文件，并比较没有
open的关闭示例与带有open的打开示例。 - 按 Tab 键以移至 summary 元素，并检查其焦点显示。对于此基础示例，请保持 summary 的内容为普通文本，而不是放置链接或互相竞争的按钮。
- 分别使用回车键和空格键来打开和关闭它。如果添加了 CSS，请重复测试，以确保焦点仍然可见。
HTML 提供原生的展开与收起机制，但添加更多交互后，仍需测试焦点的变化。MDN 的 summary 元素参考说明了它的使用条件。
如果这不起作用
检查 summary 是否位于 details 内部，以及关闭标签是否存在。如果您对控件进行了样式设置，请确保可点击区域和可见的焦点指示器未被移除。可折叠面板会让用户进行额外操作，因此最好将其保留用于真正可选或较长的内容，而不是仅用于视觉效果。还可用HTML 无障碍基础：标题、链接、图片与键盘中的小页面，进一步检查焦点与交互。
