details动态插入后不响应点击，因浏览器仅对初始渲染时满足结构约束（summary为首个子节点）的details启用折叠逻辑；须用newDetails.open=true/false赋值而非setAttribute；动态高度需JS读scrollHeight控制max-height；键盘可访问需补role="button"、aria-expanded及焦点管理；在transform等容器中失效时应改用CSS+JS方案。
为什么details在动态插入后不响应点击？
常见现象是用 innerHTML 或 appendChild 往页面里加了带 details 的 HTML，但新插入的卡片点不动。根本原因不是 JS 没绑对，而是浏览器只对「初始渲染时满足结构约束」的 details 启用折叠逻辑。
必须确保：
- summary 是 details 的第一个子节点（不能有空格、注释、<p></p> 等前置内容）
- 插入后不能靠 setAttribute('open', '') 强行激活——这只会设一个字符串值，而原生 open 是布尔属性
- 正确做法是插入 DOM 后立刻赋值：newDetails.open = false 或 newDetails.open = true
动态高度展开怎么避免截断或卡顿？
原生 details 不支持 height 过渡，想滑动就得自己控 max-height。但硬写死 max-height: 500px 容易出问题：内容少时动画拖沓，内容多时被截断。
可靠做法是 JS 动态读取真实高度：
- 展开前先临时设 el.style.height = 'auto'
- 立即读 el.scrollHeight
- 设 el.style.maxHeight = scrollHeight + 'px'
- 再清掉 height 行内样式
- 收起时设 maxHeight = '0'，并在 transitionend 里补上 overflow: hidden
如何让 JS 控制的折叠项保持键盘可访问？
手动切 display 或 max-height 后，空格键/回车键按不动，屏幕阅读器也读不出状态——因为丢了原生语义和 ARIA 同步。
立即学习“前端免费学习笔记（深入）”；
必须补全以下三点：
- 触发元素加 role="button" 和 tabindex="0"
- 用 aria-expanded="true/false" 实时反映当前状态，不要只靠 class 名判断
- 展开后，若内容区有首个可聚焦子元素（如 <input>、<a></a>），调用 focus() 把焦点移过去
details 在弹窗或 transform 容器里失效怎么办？
这不是你代码错了。Safari ≤15.4、旧 Edge、部分安卓 WebView 下，只要 details 被包在 position: fixed、transform: translate() 或 filter 容器里，summary 点击就可能无响应，或者 toggle 事件不触发。
此时别硬套原生方案，改用纯 CSS+JS 的 max-height 方案：
- 容器加 overflow: hidden
- 初始状态：max-height: 0
- 展开目标值仍用 JS 读 scrollHeight 设置
- 避免在弹窗里监听 click 到 summary，直接绑定到自定义按钮并手动管理 aria-expanded
真正难的不是写出展开动画，而是让每一次展开都对键盘用户、屏幕阅读器、不同尺寸屏幕和各种浏览器渲染层都“刚刚好”。多数问题其实出在容器 CSS 或插入时机，而不是折叠逻辑本身。
