Markdown中嵌套details下拉菜单内层不随外层收起如何解决

问题原因说明 #

原生HTML的<details>标签状态互相独立，外层标签收起仅会隐藏内部DOM内容，不会修改内层<details>的open属性，因此外层重新展开时内层会保留之前的打开状态，这是你遇到问题的根本原因。
另外你提供的代码存在小语法错误：第一个<summary>标签未正确闭合，需将末尾的<summary>改为</summary>，避免部分浏览器解析异常。

可行方案 #

方案1：JavaScript 实现状态同步（推荐）

无需修改原有HTML结构，只需引入下方JS代码，即可实现外层收起时所有嵌套的内层下拉菜单同步关闭，符合实际交互预期：

document.querySelectorAll('details').forEach(parent => {
  parent.addEventListener('toggle', () => {
    // 仅在外层收起时触发内层批量关闭
    if (!parent.open) {
      parent.querySelectorAll('details').forEach(child => child.open = false)
    }
  })
})

方案2：纯CSS实现视觉同步（无JS场景）

如果场景不允许使用JS，可以通过CSS规则强制外层收起时隐藏内层菜单内容，视觉上实现同步效果：

details:not([open]) details > :not(summary) {
  display: none !important;
}

注意该方案仅隐藏内容，不会修改内层<details>的实际状态，外层重新展开时内层会恢复之前的打开状态。

内容的提问来源于stack exchange，提问作者Joris Limonier