<details>是HTML5原生可折叠组件，语义表示用户可选查看的额外信息，自带<summary>标题，通过open布尔属性控制默认展开状态，触发toggle事件监听展开/收起。
details 元素的基本用法与语义意义
<details> 是 HTML5 原生的可折叠组件，语义上表示“用户可选是否查看的额外信息”。它不依赖 JavaScript 就能实现展开/收起，且自带 <summary> 作为触发标题。浏览器默认为关闭状态，点击 <summary> 切换 open 属性。
如何设置默认展开状态（open 属性）
加 open 属性即可默认展开，这是布尔属性，写上即生效，无需赋值：
<details open> <summary>配置项</summary> <p>这里是一些高级设置…</p> </details>
-
open是唯一影响初始状态的属性；display: block或 CSS visibility 不会改变其行为 - 移除
open后，首次点击才触发toggle事件，此时 JS 中details.open才从false变为true - 服务端渲染时若动态插入
open，需确保属性名拼写准确（不能是opened或defaultOpen）
summary 标题的样式控制与可访问性注意点
<summary> 默认带小三角图标，但该图标不可直接用 CSS 选择器（如 ::marker）跨浏览器稳定定制。常见问题包括：Chrome 显示箭头、Safari 显示实心三角、Firefox 无图标（仅靠缩进识别）。
- 用
summary::marker可在支持的浏览器中替换图标，但 Safari 目前不支持该伪元素 - 务必保留
<summary>作为<details>的第一个子元素，否则屏幕阅读器可能无法正确关联 - 避免给
<summary>加tabindex—— 它本身已是可聚焦、可键盘操作（空格/回车）的控件 - 若隐藏原生图标并自定义，记得用
aria-expanded同步状态（JS 控制时）
与 JavaScript 交互：监听展开/收起事件
<details> 触发的是 toggle 事件，不是 click。该事件在每次展开或收起后触发，且只在用户交互时发生（JS 设置 open = true 不触发）。
立即学习“前端免费学习笔记（深入）”；
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
console.log('当前状态：', details.open);
});
-
toggle事件没有event.detail，判断状态只能读取details.open - 不要在
toggle里调用preventDefault()—— 它无法被阻止，且无实际效果 - 多个
<details>共存时，每个都需单独绑定事件，不支持事件委托 - 若需动画效果（如 height 过渡），得配合 CSS
details[open] > *:not(summary)+max-height和transition，原生无动画
<summary> 写在 <details> 外面，或误以为 open 是字符串属性（写成 open="true"），其实只要存在就生效。 
