:active 无法实现导航栏“点击后保持展开”，因其仅为瞬时伪类，不记录状态、不触发重排、不能配合 display 或 max-height 过渡；正确做法是用 JS 切换 .active 类并结合 CSS 过渡与可访问性支持。
纯 :active 无法实现导航栏“点击后保持展开”的效果，它只在鼠标按下/手指触摸的瞬间生效，松开就消失。
为什么 :active 在导航栏里基本没用
导航栏的「点击展开」本质是状态切换（隐藏 ↔ 显示），而 :active 是瞬时伪类：它不记录状态、不触发重排、不能配合 display 或 max-height 做过渡。你点汉堡按钮时看到菜单闪一下又收回去，大概率就是误用了 :active 控制显隐。
- 桌面端
:active只响应鼠标左键按下的几十毫秒 - 移动端对
:active支持不稳定——Safari 默认禁用，需加* { -webkit-tap-highlight-color: transparent; }才勉强触发 - 它无法和
transition配合做展开动画，因为松手后样式立刻回退
:active 唯一靠谱的用途：视觉按压反馈
如果你真想用 :active，只该用在按钮或链接上，给用户“我点到了”的瞬时确认感，比如汉堡图标三条线缩一下、文字变深色。但必须搭配 JS 控制的类切换来真正管理菜单状态。
- 给
.hamburger加:active { transform: scale(0.95); }，松手自动恢复 - 避免对
.nav-menu本身写:active—— 它不是可交互元素，没意义 - 别用
:active替代.active类：前者是浏览器自动加的临时状态，后者是你手动控制的持久状态
替代方案：用 JS 切换 .active 类 + CSS 过渡
真正可用的展开逻辑，是 JS 监听点击，然后给菜单容器添加/移除 .active 类，再由 CSS 定义这个类的显示行为。这样既稳定，又能做动画。
- HTML 中确保
.nav-menu初始为display: none（小屏下）或max-height: 0+overflow: hidden - CSS 写
.nav-menu.active { display: flex; }或.nav-menu.active { max-height: 500px; } - JS 里用
element.classList.toggle('active')，别直接操作style.display - 动画优先选
max-height+overflow: hidden，比height更安全（避免子元素高度计算误差）
容易被忽略的细节：键盘与可访问性
只靠 :active 或纯鼠标点击，会直接让键盘用户（Tab 键导航）和屏幕阅读器失效。真实项目中必须补全：
- 汉堡按钮加
role="button"和aria-expanded="false" - 菜单容器加
role="menu"和aria-hidden="true"，展开时同步更新属性值 - 按
Escape键关闭菜单，监听document.addEventListener('keydown', ...) - 菜单打开时，焦点要自动跳进第一个可聚焦项（
focus()），否则键盘用户卡在按钮上出不去
真正难的不是让菜单动起来，而是让每一次展开都对鼠标、手指、键盘、屏幕阅读器一致生效。别把 :active 当成解决方案，它只是整个交互链里最表层的一粒沙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
