details 和 summary 是 HTML5 原生语义化标签，用于创建无需 JavaScript 的可折叠区域；details 默认闭合，点击其首个子元素 summary 自动切换 open 状态并显示/隐藏内容，summary 始终可见且支持自定义样式与 toggle 事件监听。
Details 和 Summary 是 HTML5 原生提供的语义化标签，用于构建可折叠/展开的内容区域，无需 JavaScript 即可实现基础交互。
核心逻辑：details 控制显隐状态，summary 作为触发标题
details 元素默认为闭合状态（open 属性不存在），内部内容被隐藏；点击其子元素 summary 时，浏览器自动切换 details 的 open 属性布尔值，并触发显示或隐藏行为。summary 始终可见，且必须是 details 的第一个子元素。
基本结构与默认行为
标准写法如下：
<details><summary>点击展开</summary>
<p>这里是被折叠的内容</p>
</details>
浏览器会自动为 summary 添加小箭头（方向随 open 状态变化），并绑定点击事件。该交互完全由浏览器原生支持，不依赖 JS。
立即学习“前端免费学习笔记（深入）”；
控制初始状态与自定义触发
- 添加
open属性使 details 默认展开：<details open> - summary 可包含任意内联内容（文字、图标、小图标 SVG），但不能嵌套
details或交互式元素（如 button）——否则部分浏览器可能中断默认行为 - 可通过 CSS 用
details[open] > summary::marker自定义箭头样式，或用details[open] > *选择展开后显示的后续子元素
与 JavaScript 配合增强功能
虽非必需，但可通过监听 toggle 事件响应开关动作：
if (details.open) {
console.log('已展开');
} else {
console.log('已收起');
}
});
注意：该事件在用户点击 summary 时触发，也适用于通过 JS 设置 details.open = true/false 的情况。避免对 summary 绑定额外 click 事件，以防干扰原生逻辑。
