details元素中summary必须是首个直接子元素，中间不能有空格、换行或其它标签；summary内禁用button/a等交互元素；safari旧版需html写open属性；动画推荐opacity+scaley而非max-height。
details 元素默认不支持嵌套 summary 且 summary 只能是第一个子元素
浏览器会强制把 <summary></summary> 当作 <details></details> 的首个直接子节点，如果中间插了其他标签（比如 <p></p> 或空格文本节点），<summary></summary> 就会失效——点击没反应，或被当作普通文本渲染。
实操建议：
- 确保
<summary></summary>紧跟在<details></details>开始标签后，中间不能有换行、空格或任何其他元素 - 所有内容（包括标题、图标、额外按钮）都必须包裹在
<summary></summary>内部，而不是放在它外面 - 若需添加图标，用
<span></span>或<svg></svg>写在<summary></summary>里，别用伪元素模拟可点击区域（会破坏语义和键盘焦点）
summary 标签内不能用 button 或 a 标签做折叠控制
虽然 <button></button> 或 <a href="#"></a> 在视觉上像触发器，但它们会劫持点击事件，导致 <details></details> 的原生展开/收起行为中断。常见现象是：点一次没反应，再点才动；或者按回车键无法触发。
实操建议：
- 把交互逻辑完全交给原生
<summary></summary>，不要给它加role="button"或tabindex - 如需自定义样式（比如去掉默认箭头），用 CSS 的
list-style: none+::marker控制，而不是替换为<button></button> - 需要额外操作（如记录点击、联动其他组件），监听
<details></details>的toggle事件，而非给<summary></summary>绑 click
details 在 Safari 旧版本中不支持 open 属性的 JS 动态设置
Safari ≤ 15.4 中，通过 JavaScript 设置 details.open = true 或调用 details.setAttribute('open', '') 可能无效，页面仍保持收起状态，但 DOM 上已标记 open。
实操建议：
- 需要初始化展开时，直接在 HTML 中写
<details open></details>，不要依赖 JS 设置 - 运行时控制开闭，优先用
details.toggle()方法（兼容性更好），而非直接改open属性 - 如需兼容 Safari 15.3 及更早，可在
DOMContentLoaded后加一次details.offsetHeight强制重排，再调用toggle()
用 CSS 控制 details 折叠动画时，max-height 不可靠
<details></details> 展开/收起是即时切换的，没有内置过渡。想加淡入/高度动画，常有人用 max-height + transition，但因为内容高度不确定，设死的 max-height 值容易裁剪文字或留大片空白。
实操建议：
- 避免用固定
max-height（如max-height: 500px），改用height: auto配合 JS 测量真实高度再过渡 - 更稳妥的做法是只加
opacity和transform: scaleY()动画，视觉效果干净且无需测量 - 注意：动画过程中若用户快速点多次，可能造成状态错乱，建议加节流或禁用点击期间的交互
<summary></summary> 失效，而你查半天控制台也看不出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
