原生details/summary不支持可靠嵌套，子项点击会冒泡导致父项关闭；需用event.stopPropagation()隔离事件，并通过data-expanded和aria属性独立管理每层状态，避免共用变量或全局开关。
HTML 本身不支持手风琴嵌套，所谓“手风琴嵌套”必须靠 JavaScript 控制 DOM 展开/收起逻辑，且需避免事件冒泡、状态错乱、焦点丢失等常见问题。纯 CSS 实现的 details/summary 在多数浏览器中不支持多层嵌套展开（Chrome 122+ 开始部分支持，但 Safari 和 Firefox 仍存在折叠穿透或样式继承异常）。
用 details + summary 做基础嵌套时，为什么子项点开会连带父项关闭？
这是默认行为：点击子 summary 会触发其自身 toggle 事件，但若父 details 也监听了同级点击，事件会向上冒泡，导致父级也被 toggle。解决方式不是阻止所有冒泡，而是精准拦截：
- 给子
summary绑定click事件，调用event.stopPropagation() - 不要在父
details上额外加onclick，依赖原生行为即可 - Safari 中需额外加
cursor: pointer到summary，否则子项可能无法响应点击
示例结构：
<details>
<summary>一级标题</summary>
<p>内容…</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<details>
<summary onclick="event.stopPropagation()">二级标题</summary>
<p>嵌套内容…</p>
</details>
</details>
用 JavaScript 手写手风琴嵌套，关键要隔离每层的展开状态
手动实现时，不能共用一个全局开关变量，否则父子状态会互相覆盖。正确做法是为每个手风琴项分配唯一 ID，并用 dataset 或独立对象存储其当前是否展开：
- 每个
<div class="accordion-item"> 加 <code>data-id="a1"和data-expanded="false" - 点击时只操作当前元素及其直接子
.accordion-content，不遍历祖先 - 若需“单选模式”（即展开一个则收起同级其他），只作用于同一父容器下的兄弟节点，不跨层级
- 用
aria-expanded和aria-controls同步更新，保障可访问性
简单切换逻辑片段：
document.querySelectorAll('.accordion-header').forEach(el => {
el.addEventListener('click', () => {
const item = el.closest('.accordion-item');
const isExpanded = item.dataset.expanded === 'true';
item.dataset.expanded = isExpanded ? 'false' : 'true';
item.querySelector('.accordion-content').hidden = isExpanded;
});
});
嵌套手风琴里，CSS 动画和 height 过渡为什么失效或抖动？
对 height 做 transition 时，若子内容高度动态变化（比如文字换行、图片加载完成），或父容器设置了 overflow: hidden 但未预留足够空间，就会出现过渡中断、跳变或卡顿。根本原因是：height: auto 无法被 CSS 过渡识别。
- 避免直接 transition
height；改用max-height（设一个足够大的安全值，如max-height: 500px），并配合overflow: hidden - 嵌套场景下，子手风琴的
max-height必须大于其内部最大可能高度，否则会被截断 - 若内容含图片，确保图片加载完成后再初始化手风琴，或监听
img.onload后重置max-height - 使用
transform: scaleY()+origin-top是更稳定的替代方案，但需注意子元素内绝对定位元素的渲染偏移
嵌套层级越深，DOM 查询范围和事件委托粒度越关键；别为了“看起来像嵌套”而把所有内容塞进同一个 JS 初始化函数里——每一层应该有自己独立的状态管理边界。
