最轻量方案是用原生details+summary实现多级折叠，语义正确、无障碍友好且免JS；但IE不支持，需根据项目兼容性权衡，触控设备需补充降级方案。
导航菜单需要支持多级折叠，用 details + summary 最轻量
现代浏览器原生支持的 details 元素能免 JS 实现可展开/收起，语义正确、无障碍友好，且无需额外 CSS 控制显隐逻辑。IE 不支持，但若项目已放弃 IE，这是最干净的选择。
常见错误是强行用 div + click 事件模拟，结果要写 JS 切 class、处理键盘焦点、适配屏幕阅读器——本可避免。
-
summary内容会自动成为折叠控件，支持空格/回车触发，无需监听事件 - 嵌套多层时，每个
details独立控制，不互相干扰 - 用
open属性可默认展开某一级（如“女装”初始展开），但慎用，移动端首屏信息过载 - 样式上，
summary::marker可自定义箭头，但 Safari 旧版需加-webkit-details-marker
纯 CSS 实现 hover 展开（PC 端适用），避开 JS 依赖但注意触控缺陷
用 :hover 配合子选择器（如 .nav-item:hover .submenu）能零 JS 实现二级菜单显示。适合后台系统或 PC 主力场景，但必须意识到它在触摸设备上不可靠。
典型问题是开发者测试只在桌面 Chrome，上线后 iOS 用户点不动二级项，因为 :hover 在多数移动浏览器中仅短暂触发，且无“悬停”概念。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须为触控设备补充
@media (hover: none)或(pointer: coarse)降级方案，比如改用点击展开 - 子菜单
position: absolute时，父容器需设position: relative，否则定位偏移 - 过渡动画建议用
opacity+transform，避免直接 animatingheight（无法 transition auto） - 键盘用户无法通过 Tab 进入隐藏菜单，需额外加
aria-expanded和aria-controls
需要兼容旧浏览器或复杂交互？用 aria-haspopup + 手动管理 focus
当必须支持 IE11 或要求键盘操作完整（如按方向键切换子项），就得用 JS 控制 aria-expanded、aria-hidden，并手动管理焦点流。这不是“增强”，而是合规刚需。
容易被忽略的是：仅加 ARIA 属性不等于可访问，焦点必须真实移动到子菜单首个可聚焦元素（如第一个 a 或 button），且 Esc 键需关闭菜单并返回触发按钮。
- 监听
keydown时，对ArrowDown/ArrowRight做不同处理：同级用 Down，进入下级用 Right -
aria-haspopup="menu"要配role="menu"和子项role="menuitem"，否则屏幕阅读器不识别为菜单结构 - 动态插入的子菜单（如异步加载分类），需在 DOM 插入后调用
element.focus()，否则焦点卡在空白处 - 不要用
display: none隐藏菜单——它会同时移除可访问性树节点；改用visibility: hidden+aria-hidden="true"
移动端点击展开菜单，click 事件要防重复触发和透传
在触摸设备上，给导航项绑定 click 展开子菜单是最稳妥的交互，但实际开发中常因事件冒泡或快速连点导致状态错乱。
一个典型现象是：点一次没反应，再点一次突然展开两层，或者点击子菜单链接时父菜单意外收起——这基本是事件未阻止或状态未同步。
- 用
event.stopPropagation()阻止子菜单内点击冒泡到父级click监听器 - 给触发按钮加
touchstart+preventDefault()，避免移动端 300ms 延迟带来的双击误判 - 状态管理别依赖 class 切换与否来判断开闭，统一用布尔变量或
dataset.open = "true"记录真实状态 - 如果子菜单含表单控件（如搜索框），需单独处理
focusin事件防止失焦时自动收起
