details标签点击失效的主因是summary未作为其第一个子元素，中间存在注释、空标签或空白文本节点；必须用闭合标签标题，且父容器overflow:hidden会裁剪展开内容。

details 和 summary 是最直接、最轻量的实现方式，无需 JavaScript，语义正确，键盘和读屏器原生支持。但想让“查看更多”按钮样式统一、动画平滑、兼容旧 WebView 或响应 URL 参数时，就得绕开原生行为，用 JS + max-height 控制。

为什么details点不动？常见 DOM 结构陷阱

不是代码写错了，而是浏览器根本不认这个折叠逻辑：

• summary 必须是 details 的第一个子元素 —— 中间插个 、
  或空格文本节点，都会让点击失效
• 不要写
  ，它必须是闭合标签：
  标题
• 父容器设了 overflow: hidden 且高度固定，展开内容会被直接裁掉 —— 这是 CSS 规则生效，不是 bug
• 微信安卓旧版 WebView、QQ 内置浏览器可能完全忽略 open 属性，真机测试不能跳过

怎么让“查看更多”按钮真正可控？JS 切换状态的必要场景

只有两种情况值得放弃原生 details，改用 JS 控制：

• 初始展开状态由 URL 参数决定，比如访问 ?section=3 时自动展开第 3 项
• 需要与其他组件联动，例如左侧导航点击后，右侧对应 details 同步展开

别为“动画更顺滑”强行 JS 化 —— 原生 details 不支持 height 过渡，硬加 max-height 动画反而会破坏键盘操作（空格/回车失效）和读屏支持。监听 toggle 事件，不是 click。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

max-height 过渡动画怎么写才不抖、不截断？

核心难点是：浏览器无法对 height: auto 做过渡。必须用 max-height 模拟，但值设太大卡顿，设太小又截断：

• 展开前先测高：panel.scrollHeight，再赋给 max-height；收起时设为 0 并加 overflow: hidden
• 避免用固定值如 max-height: 500px —— 长文本撑不满会白等动画，短文本超了就截断
• 如果内容含 或异步加载元素，展开后需强制重排：panel.offsetHeight（哪怕只读一次）
• 容器内有 flex 子项时，加 align-items: flex-start，防止基线对齐干扰高度计算

移动端“点两下才生效”或无响应？别漏这三处

这不是代码问题，是渲染层和事件层的隐性冲突：

• 给触发按钮加 touch-action: manipulation，减少 300ms 延迟
• 避免把按钮放在 position: fixed 层下面 —— 点击穿透在安卓 WebView 中极常见
• 不要用 line-clamp 截断文本再套折叠 —— 它和 max-height 冲突，Safari 旧版本会展开后仍显示省略号

最易被忽略的是：展开后焦点不会自动落到内容区。如果用户靠键盘导航，得手动 focus()，但要判断是否真需要 —— 强行聚焦可能打断正在输入的流程。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！