技能｜前端导航菜单交互改造流程

适用场景

多级菜单既要"点得进去"又要"看得见下层"，还得兼顾触屏；且首页 /overview、页头导航已定稿、不允许大改时。触发词：导航改造、二级菜单、悬停展开、手机打不开菜单。

操作步骤

1. 先确认定稿边界：templates.py 里 /overview 与页头导航是定稿区（结构/样式/交互禁改）；改造只在允许范围内做加法，涉及定稿区先给方案确认再动。
2. 单一数据源（关键，避免两处维护）：在 templates.py 顶部定义——
   - _NAV_LABELS：10 个域键（小写 zl,hl,cw,ed,zq,lw,da,re,se,op）；
   - _NAV_NAME：键→中文名；
   - _NAV_HOME = {k:'/docs?dom=%s'%k.upper()}：一级菜单点名称 = 跳转该域制度目录；
   - _NAV_GEN：二级同构模板（('/l/%s','台账')、('/l/%s/new','新增')、导出、临期提醒），一处改全局生效；
   - _NAV_EXTRA：各域专属类目（如 hl:体检/门诊/复查随访/疫苗）。
   - 由循环（约 templates.py:57）生成 MENU 结构：一级（名称+home+subs）。
3. 三种行为分工：
   - 一级名称 → <a href=域目录>：点击=跳转；
   - 纯 CSS：.navitem:hover>.sub / :focus-within → 悬停展开二级（无 JS 最稳）；
   - 一级右侧 ▾（caret） → 触屏点击切换 .open 类展开（.navitem.open>.sub）。
4. JS 只拦两类元素（templates.py 约 1437 起）：e.target.closest('.caret') → preventDefault 并 toggle .open（▾ 开合）；e.target.closest('.hdtoggle') → 页头图标开合。不要给整个菜单项绑"阻止默认跳转"——否则一级跳转失效。
5. 样式沿用：.navitem .sub 用 CSS 变量配色，暗色模式同步；最后 3 个域用 nth-last-child(-n+3) 把二级子菜单右对齐（right:0）。
6. 验收三项互不干扰：桌面悬停能展开、点名称能跳转、触屏点 ▾ 能开合。

注意边界

• 纯 CSS 悬停 + 少量 JS 开合是最小改动组合，别为此引前端框架。
• 触屏没有 hover，必须有替代交互（▾）。
• 定稿区结构/样式/交互一律不动，只增不改；改前先确认方案。

反例避雷

• 整个菜单项绑 click 并阻止默认 → 一级跳转失效，用户以为菜单坏了。
• 只做 hover 不做触屏替代 → 手机上永远打不开二级菜单。
• 菜单数据写死在模板 → 与页面标题两处维护，加域必漏一处。
• 顺手改定稿区样式 → 用户不认，全部返工。

关联笔记

• [[技能｜全页面回归冒烟法]]
• [[技能｜仪表盘聚合视图接入流程]]

实战战绩

2026-09-28 首跑：十域一级菜单改为"点名称跳域列表 + 悬停纯 CSS 展开二级 + ▾ 供触屏开合"，JS（templates.py 约 1437）仅拦截 .caret 与 .hdtoggle 两类；三种交互互不干扰，定稿区零改动。

版本记录