details标签点击失效的主因是summary未作为其第一个子元素，中间存在注释、空标签或空白文本节点；必须用闭合标签标题，且父容器overflow:hidden会裁剪展开内容。
details 和 summary 是最直接、最轻量的实现方式，无需 JavaScript，语义正确，键盘和读屏器原生支持。但想让“查看更多”按钮样式统一、动画平滑、兼容旧 WebView 或响应 URL 参数时，就得绕开原生行为，用 JS + max-height 控制。
为什么details点不动？常见 DOM 结构陷阱
不是代码写错了，而是浏览器根本不认这个折叠逻辑：
-
summary必须是details的第一个子元素 —— 中间插个<!-- 注释 -->、<div></div>或空格文本节点，都会让点击失效 - 不要写
<summary></summary>，它必须是闭合标签：<summary>标题</summary> - 父容器设了
overflow: hidden且高度固定，展开内容会被直接裁掉 —— 这是 CSS 规则生效，不是 bug - 微信安卓旧版 WebView、QQ 内置浏览器可能完全忽略
open属性，真机测试不能跳过
怎么让“查看更多”按钮真正可控？JS 切换状态的必要场景
只有两种情况值得放弃原生 details，改用 JS 控制：
- 初始展开状态由 URL 参数决定，比如访问
?section=3时自动展开第 3 项 - 需要与其他组件联动，例如左侧导航点击后，右侧对应
details同步展开
别为“动画更顺滑”强行 JS 化 —— 原生 details 不支持 height 过渡，硬加 max-height 动画反而会破坏键盘操作（空格/回车失效）和读屏支持。监听 toggle 事件，不是 click。
立即学习“前端免费学习笔记（深入）”；
max-height 过渡动画怎么写才不抖、不截断？
核心难点是：浏览器无法对 height: auto 做过渡。必须用 max-height 模拟，但值设太大卡顿，设太小又截断：
- 展开前先测高：
panel.scrollHeight，再赋给max-height；收起时设为0并加overflow: hidden - 避免用固定值如
max-height: 500px—— 长文本撑不满会白等动画，短文本超了就截断 - 如果内容含
<img alt="HTML阅读全文怎么实现折叠展开？查看更多设置" >或异步加载元素，展开后需强制重排：panel.offsetHeight（哪怕只读一次） - 容器内有
flex子项时，加align-items: flex-start，防止基线对齐干扰高度计算
移动端“点两下才生效”或无响应？别漏这三处
这不是代码问题，是渲染层和事件层的隐性冲突：
- 给触发按钮加
touch-action: manipulation，减少 300ms 延迟 - 避免把按钮放在
position: fixed层下面 —— 点击穿透在安卓 WebView 中极常见 - 不要用
line-clamp截断文本再套折叠 —— 它和max-height冲突，Safari 旧版本会展开后仍显示省略号
最易被忽略的是：展开后焦点不会自动落到内容区。如果用户靠键盘导航，得手动 focus()，但要判断是否真需要 —— 强行聚焦可能打断正在输入的流程。
