最轻量方案是用原生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 在多数移动浏览器中仅短暂触发，且无“悬停”概念。

• 必须为触控设备补充 @media (hover: none) 或 (pointer: coarse) 降级方案，比如改用点击展开
• 子菜单 position: absolute 时，父容器需设 position: relative，否则定位偏移
• 过渡动画建议用 opacity + transform，避免直接 animating height（无法 transition auto）
• 键盘用户无法通过 Tab 进入隐藏菜单，需额外加 aria-expanded 和 aria-controls

需要兼容旧浏览器或复杂交互？用 aria-haspopup + 手动管理 focus

当必须支持 IE11 或要求键盘操作完整（如按方向键切换子项），就得用 JS 控制 aria-expanded、aria-hidden，并手动管理焦点流。这不是“增强”，而是合规刚需。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

容易被忽略的是：仅加 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 事件防止失焦时自动收起

关键点始终落在：**交互方式决定技术选型，而设备能力与辅助技术需求决定你能否省略某部分逻辑**。没有“通用最优解”，只有“当前场景下漏掉哪条就会出问题”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！