<details>是原生可展开/收起的语义化容器，浏览器自动处理open状态切换，无需JS即可响应点击；默认不展开，需加open属性显示初始内容，内部必须有且仅有一个<summary>作为触发区，其余为折叠内容。
details标签的基本用法和交互逻辑
<details> 是原生可展开/收起的语义化容器，浏览器自动处理 open 状态切换，不需要 JS 就能响应用户点击。它默认不展开，要显示初始内容需加 open 属性；内部必须配一个 <summary> 作为触发区域，其余内容为折叠体。
常见错误是把 <summary> 写成多个，或漏掉——这会导致整个 <details> 失去交互能力，点击无反应；也有人误以为它支持嵌套 <details>，其实可以，但部分旧版 Safari 对嵌套的 open 状态同步有 bug。
如何用details展示表单提交后的反馈信息
适合在表单下方直接插入反馈块，避免页面跳转或额外弹窗。关键是把反馈内容（如成功提示、错误列表）放在 <details> 内部，并通过 JS 控制 open 属性显隐。
- 提交成功后，用
feedbackEl.open = true主动展开，比setAttribute('open', '')更可靠 - 错误反馈建议用
<ul>列出具体字段问题，但注意：不要把<ul>直接塞进<summary>，否则会破坏点击区域 - 如果反馈需动态更新（比如多次提交），记得每次先清空内容再写入，否则旧消息会残留
<details id="feedback"> <summary>操作结果</summary> <p>✅ 提交成功，已发送至审核队列</p> </details>
兼容性与样式控制的关键点
IE 完全不支持 <details>，Edge 15+、Chrome 12+、Firefox 49+、Safari 6+ 支持。如果必须兼容 IE，得降级为 JS 实现的折叠组件，不能只靠 CSS。
立即学习“前端免费学习笔记（深入）”；
默认箭头样式不可直接用 CSS 修改方向（appearance: none 在 Safari 中对 <summary> 无效），稳妥做法是隐藏原生箭头 + 自定义图标：
- 用
summary::marker { display: none; }清除箭头（Firefox/Chrome 有效，Safari 需配合list-style: none） - 给
<summary>加position: relative，再用伪元素添加自定义图标 - 注意：展开时
<details>的高度是自动计算的，若内部有动画，需手动设置transition: height 0.2s并配合 JS 计算滚动高度
用JavaScript监听展开/收起状态变化
<details> 没有专门的 toggle 事件，只能监听 toggle 这个原生事件（注意不是 click）——它在用户点击 <summary> 后触发，且无论开或关都会触发一次。
容易踩的坑是：在事件回调里读 detailsEl.open，这个值已经是切换后的新状态；如果要做「展开时加载数据」，得先判断当前是否为 false，再发起请求。
- 不要用
addEventListener('click', ...)绑定到<summary>上，它无法区分是用户点击还是脚本调用open = true - 如果同时有多个
<details>共享同一组反馈逻辑，建议用事件委托绑定到父容器，再用event.target.closest('details')定位 - SSR 场景下，服务端渲染时若带
open属性，客户端 hydration 后可能因状态不一致导致闪动，建议初始统一不设open，由 JS 控制
真正麻烦的不是怎么展开，而是当反馈内容含异步加载、表单重置、键盘焦点管理（比如展开后应 focus 到第一条错误）时，<details> 的原生行为就显得单薄了——这些都得自己补全。
