原生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>
  <details><summary onclick="event.stopPropagation()">二级标题</summary><p>嵌套内容…</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
														src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
													<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  </details></details>

用 JavaScript 手写手风琴嵌套，关键要隔离每层的展开状态

手动实现时，不能共用一个全局开关变量，否则父子状态会互相覆盖。正确做法是为每个手风琴项分配唯一 ID，并用 dataset 或独立对象存储其当前是否展开：

• 每个
  加 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 初始化函数里——每一层应该有自己独立的状态管理边界。