:focus-within是CSS伪类，当元素自身或其任意后代获得焦点时匹配，适合下拉菜单因其能保持父容器展开状态，使键盘用户可导航菜单项，避免:hover仅限鼠标、:focus失焦即收起的问题。
什么是 :focus-within，它为什么适合下拉菜单
:focus-within 是一个 CSS 伪类，当元素本身或其**任意后代获得焦点**时，该元素就会匹配。它不像 :hover 那样依赖鼠标悬停，也不像 :focus 那样只作用于聚焦元素自身——这正好解决下拉菜单“鼠标移开就消失”的经典痛点。
关键在于：只要菜单里的链接、输入框、按钮等可聚焦元素处于焦点状态，父级容器（比如 .dropdown）就能保持展开样式，用户就有时间用键盘导航或点击。
注意：:focus-within 在现代浏览器中支持良好（Chrome 60+、Firefox 52+、Safari 15.4+、Edge 79+），但 IE 完全不支持，需确认目标环境。
基础 HTML 结构必须满足可聚焦条件
下拉菜单要能“留住”，HTML 结构得让焦点能自然落入菜单内部。常见错误是只给触发按钮加 tabindex，却忘了菜单项本身是否可聚焦。
- 触发按钮（如
<button> 或带 role="button" 的 <div>）必须是可聚焦的（原生 <button> 默认可聚焦）
- 下拉菜单容器（如
<div class="dropdown-menu">）本身不需要 tabindex，但它的子元素（如 <a>、<button>）必须是原生可聚焦元素，或显式添加 tabindex="0"
- 避免把菜单内容包在
<div tabindex="-1"> 里——tabindex="-1" 仅允许 JS 主动聚焦，无法被 Tab 键自然进入
<button> 或带 role="button" 的 <div>）必须是可聚焦的（原生 <button> 默认可聚焦）<div class="dropdown-menu">）本身不需要 tabindex，但它的子元素（如 <a>、<button>）必须是原生可聚焦元素，或显式添加 tabindex="0"
<div tabindex="-1"> 里——tabindex="-1" 仅允许 JS 主动聚焦，无法被 Tab 键自然进入示例结构：
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true">菜单</button>
<div class="dropdown-menu">
<a href="#item1">选项一</a>
<a href="#item2">选项二</a>
<button type="button">操作按钮</button>
</div>
</div>
核心 CSS 写法与常见陷阱
核心逻辑是：默认隐藏菜单，当 .dropdown 处于 :focus-within 状态时显示它。
正确写法：
.dropdown-menu {
display: none;
}
.dropdown:focus-within .dropdown-menu {
display: block;
}
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
.dropdown-menu:focus-within❌ —— 错！这是检测菜单自己或其后代聚焦，但菜单默认不可聚焦，且用户焦点通常落在菜单项上，不是菜单容器 - 只靠
:focus-within不处理按钮的aria-expanded同步 ❌ —— 这属于可访问性缺陷，视觉状态和语义状态脱节，屏幕阅读器无法感知展开状态 - 没加过渡动画却直接用
display切换 ❌ ——display无法过渡，会导致突兀闪现；如需动画，改用opacity+visibility或transform，并确保:focus-within触发的是同一组属性
键盘操作与可访问性补漏要点
:focus-within 让键盘用户能停留菜单，但还差几步才能真正可用：
- 触发按钮需监听
Enter 和 Space 键展开/收起菜单，并同步更新 aria-expanded
- 菜单展开后，首次 Tab 应跳入第一个可聚焦子项（不是菜单容器），可通过
.dropdown-menu a:first-child:focus 等微调顺序
- 按
Escape 应收起菜单并把焦点移回触发按钮 —— 这必须用 JS 实现，:focus-within 本身不响应按键
- 菜单关闭时机：不仅靠失焦，还要考虑点击菜单外区域、或 Tab 移出整个
.dropdown 容器后自动关闭（后者需 JS 监听 blur 延迟判断）
Enter 和 Space 键展开/收起菜单，并同步更新 aria-expanded
.dropdown-menu a:first-child:focus 等微调顺序Escape 应收起菜单并把焦点移回触发按钮 —— 这必须用 JS 实现，:focus-within 本身不响应按键.dropdown 容器后自动关闭（后者需 JS 监听 blur 延迟判断）纯 CSS 方案能解决“停留”问题，但完整可用的下拉菜单仍绕不开少量 JS 来处理焦点管理、ARIA 状态同步和 Escape 行为。别指望单靠 :focus-within 一劳永逸。
