details标签不支持嵌套，多栏目须平级并列；默认全收起时用JS设首个open=true；动态加载需标记data-loaded防重复；移动端需修复summary点击热区与动画冲突。
details标签不支持嵌套，多栏目必须平级排列
直接在details里再写一个details是无效的——HTML5规范未定义嵌套行为，iOS Safari、微信X5内核会点击无响应，Chrome/Firefox也可能状态不同步。多栏目展开页的正确结构是多个details并列，每个独立控制开闭，互不影响。
常见错误写法：<details><summary>栏目1</summary><details><summary>子栏目</summary>...</details></details>，这种结构在真机上大概率点不开二级。
- 每个栏目用单独的
details包裹，summary必须是它的第一个子元素 - 栏目之间用
<p></p>或<hr>分隔，避免视觉粘连 - 不要用
div包裹多个details再设样式来“模拟嵌套”，语义和可访问性会受损
如何让多个栏目默认收起但首次加载时自动展开第一个
浏览器不提供“只展开第一个”的原生属性，得靠少量JS干预，但不用监听click——toggle事件是为状态变化设计的，而初始状态由HTML决定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
details都不加open属性，保证默认全收起 - 页面加载后，用
document.querySelector('details')拿到第一个，然后el.open = true - 别用
el.setAttribute('open', '')，布尔属性赋值更可靠 - 如果服务端渲染（SSR）已知要展开哪个，直接在HTML里写
<details open>，JS只负责后续交互
点击展开时动态加载内容，怎么防重复请求
用户反复点开/收起同一个栏目，若每次toggle都fetch一次，既浪费带宽又可能渲染旧数据。关键不是阻止事件，而是标记“已加载”状态。
推荐做法：
- 给
details加data-loaded="false"，首次toggle且el.open === true且data-loaded === "false"时才发起请求 - 请求成功后立即设
el.dataset.loaded = "true"，并把HTML插入到summary之后（不是里面） - 收起时不删DOM，只保留内容；再次展开直接显示，不重载
- 避免在
toggle回调里直接操作innerHTML拼接字符串，优先用insertAdjacentHTML('beforeend', ...)或append()
移动端点按失效或双击才触发？检查summary的可点击区域
iOS Safari和部分Android WebView对summary的触摸响应较敏感，常表现为点一下没反应、点两下才展开。根本原因是summary默认是display: list-item，内部有隐式padding/margin，导致点击热区过小或错位。
修复要点：
- 给
summary显式设padding: 0.75em 1em，确保热区足够大 - 移除
summary::marker后，若用自定义图标（如SVG），必须给summary加display: flex; align-items: center;，否则图标和文字不对齐，点击位置偏移 - 禁用
user-select: none——某些UI框架默认加了它，会导致iOS上无法触发toggle - 不要给
summary设pointer-events: none，哪怕只是临时调试，它会彻底禁用原生交互
最易被忽略的是：动态插入内容后，若内部有input或button，焦点滚动和details展开动画会冲突，导致输入框被遮挡或跳动。此时必须关掉原生动画，用max-height过渡替代，并手动调用scrollIntoView。这不是边缘情况，而是移动端表单类展开页的标配处理。
