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