原生 details 不支持嵌套，因 HTML5 规范要求 summary 必为首个子元素，嵌套会破坏 DOM 层级导致折叠失效；可靠方案是 ul/li + checkbox + ARIA 的纯 CSS 多级菜单，需严格遵循结构、选择器与可访问性规范。
原生 details 不支持嵌套，强行用会失效
浏览器对嵌套 details 的处理不一致：Chrome/Firefox 会忽略内层 open 状态，Safari 直接不响应点击；更关键的是，HTML5 规范未定义嵌套行为，summary 必须是 details 的**首个子元素**，一旦中间插入另一个 details，外层折叠逻辑就中断。这不是样式问题，而是 DOM 层级被破坏导致的原生能力退化。
真正可靠的多级折叠必须用 ul/li + input[type="checkbox"]
这是当前最稳的纯 CSS 方案，不依赖 JS、能记忆状态、兼容触摸设备，且通过 ARIA 属性保障可访问性。结构必须严格满足：
-
和必须紧邻，中间不能有换行、空格或其它标签（HTML 空白符会被解析为文本节点，破坏~兄弟选择器） -
必须紧跟在label后面，且是它的**直接兄弟节点** - 所有可展开项加
aria-haspopup="true"和初始aria-expanded="false" - 顶级
ul加role="menubar"，每层ul加role="menu"，每个链接加role="menuitem"
CSS 控制显隐必须写成：input[type="checkbox"]:checked ~ .submenu { display: block; }，不能用 visibility 或 opacity，否则焦点仍可达但视觉不可见，违反可访问性。
移动端必须强制收起所有子菜单，不能靠 JS 切换
小屏下允许多级同时展开会导致内容区严重挤压，甚至触发横向滚动——这不是体验问题，而是布局失控。必须用 @media (max-width: 768px) 重置所有 .submenu 为 display: none，且该规则不能被 JS 动态覆盖。如果 JS 仅控制 class="is-open"，CSS 再基于该 class 控制显隐，就能避免媒体查询被 style.display 覆盖的问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
微信/X5 内核要降级，不能指望 details
微信内置浏览器（X5 内核）对 details 标签支持极差，检测到 Micromessenger UA 时，应直接渲染 div+button 降级结构，并手动补全 aria-expanded、tabindex="0" 和键盘事件（Enter/Space），否则整个侧边栏在微信里会完全不可操作。
层级缩进别用 margin-left，它会让 tab 键聚焦框偏移；也别用 transform: rotate() 做图标动画，会导致文字重排抖动。这些细节在开发时容易被跳过，但上线后就是真实用户的卡点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
