原生 details 标签嵌套在 Safari 和微信 X5 内核下必然失效，必须用 ul/li + input[type="checkbox"] 的纯 CSS 方案实现多级折叠；子 ul 必须是父 li 的直接子元素，input 与 label 必须紧邻无空白，CSS 须用 :checked ~ .submenu 控制显示，小屏下需媒体查询强制收起子菜单。
原生 details 标签支持嵌套，但 Safari 和微信 X5 内核下会直接失效——不是“偶尔不工作”，而是 DOM 层级被忽略、状态不同步成必然结果。真要多层折叠，必须用 ul/li + input[type="checkbox"] 的纯 CSS 方案。
为什么不能嵌套 details 做多级菜单
看似能写两层 details，实际在 iOS Safari 和微信内嵌浏览器（X5 内核）中，子 details 完全不响应点击；即使在 Chrome/Firefox 中表现正常，也无法保证屏幕阅读器正确识别父子控制关系。规范上也未定义嵌套行为，属于“偶然可用，不可依赖”。
- 子
details必须是父details的**直接子元素**，中间不能插div或文本节点，否则 Safari 直接跳过 -
summary必须是details的第一个子元素，否则触发逻辑中断 - 嵌套后，子
details[open]的aria-expanded不会自动关联到内容区，必须手动补aria-controls和 ID —— 但 X5 内核连aria-controls都不解析
ul/li + input[type="checkbox"] 的可靠写法
这是目前唯一能在微信、iOS、安卓 WebView 全平台稳定工作的多级折叠结构，且无需 JS 就能保持展开状态和键盘导航。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
input[type="checkbox"]必须紧邻label，中间不能有换行或空格（HTML 空白符会被解析为文本节点，破坏~兄弟选择器） - 子
ul必须是父li的**直接子元素**，不能包在div里，也不能放在父li外面 - CSS 规则必须写成：
input[type="checkbox"]:checked ~ .submenu { display: block; }，不能用visibility或opacity，否则焦点仍可达 - 顶级
ul加role="menubar"，每层ul加role="menu"，每个可点击项加role="menuitem"和aria-haspopup="true"
移动端必须强制收起所有子菜单
小屏下若允许多级同时展开，内容区会被挤压到无法阅读，甚至触发横向滚动。这不是样式问题，是布局失控。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)直接重置所有.submenu为display: none - 不要靠 JS 切换 class 来模拟收起——媒体查询优先级更高，JS class 很可能被覆盖
- 如果需要“点开一级后才允许展开二级”，得用 JS 控制
input的disabled状态，CSS 无法做到条件启用
最易被忽略的点：微信公众号 HTML 富文本上传虽支持完整标签，但 X5 内核对 details 的解析是硬性降级，连 open 属性都会被忽略。别在上线前只测 Chrome，务必用真机微信打开验证 DOM 是否被重排、点击是否触发、键盘 Tab 是否能进入子项。
