details标签适合移动端FAQ等轻量折叠交互，但不适用于复杂导航；需确保summary为首个子元素、触控区≥44×44px、避免嵌套及内联图片，并为iOS/微信降级为div+button方案。
details 标签在移动端网页里不是万能菜单开关，它适合做「可点开看详情」的轻量交互，比如 FAQ、参数说明、长文段落折叠——但别拿它当侧边栏或三级导航用，否则 iOS 和微信里大概率点不动。
移动端 FAQ 折叠块：怎么写才不被 Safari 忽略
用户点一次就展开、再点收起，这是 details 最稳的用法。关键不是“能不能动”，而是“点得准、读得懂、收得稳”。
-
summary必须是details的第一个子元素，不能套在<p>或<div>里，否则 iOS Safari（≤17.4）直接不响应点击 - 移动端触控热区至少 44×44px：
summary { padding: 16px; min-height: 44px; } - 原生三角图标太小？别用
::-webkit-details-marker，它在旧 Safari 里失效；统一用summary::before { content: "▶"; }+details[open] summary::before { content: "▼"; } - 避免在
summary里放<img>或<svg>，微信 X5 内核会劫持点击事件；非要放，得加pointer-events: none
长文段落折叠：如何让“展开更多”有滑动动画
原生 details 是硬显隐，没有滑动效果。要观感更顺，得靠 max-height 过渡，但不能瞎设值。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 初始状态设
max-height: 80px; overflow: hidden;，过渡用transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); - 展开时设一个“够大但不过头”的值，比如
max-height: 500px；别用max-height: 100vh，安卓低端机容易卡顿 - 内容含图片？加
loading="lazy"，防止展开瞬间大量加载拖慢动画 - 别用 JS 直接改
style.height—— 它无法动画，且破坏toggle事件触发链
iOS 和微信里点不开？不是代码问题，是必须降级
iOS Safari（直到 17.4）对嵌套 details 支持差，微信 Android X5 内核（尤其 v8.0.4x 以下）甚至完全忽略该标签。这时候修不如换。
立即学习“前端免费学习笔记（深入）”；
- 用 UA 检测是否为
Micromessenger或iOS，是则渲染<div class="accordion-item"><button>标题</button><div class="content">...结构 -
button必须带role="button"和动态aria-expanded，否则 VoiceOver 读作“未命名按钮” - 别把
details当受控组件绑定open属性——Vue/React 里强行双向绑定会导致状态漂移 - 降级后用
classList.toggle('is-open')控制显示，CSS 里用.is-open .content { max-height: 500px; }实现动画
真正难的不是让内容动起来，而是让同一段 HTML 在 iOS Safari、微信 X5、NVDA 屏幕阅读器和低端安卓机上，都保持“点一下就开、再点就关、焦点不丢、语音能读”。details 提供的是语义和基础行为，不是交钥匙方案；所有定制，都得从它原生支持的边界出发，而不是绕过它。
