:focus-within是css伪类，当元素自身或其任意后代获得焦点时匹配父容器，天然支持键盘导航且无需js；适用于导航栏下拉菜单显隐控制，但失焦隐藏需配合js实现。
什么是 :focus-within，它为什么适合导航栏交互
:focus-within 是一个伪类，当元素自身或其任意后代获得焦点（比如用户点击、Tab 键进入）时，该伪类匹配成功。它不像 :focus 那样只作用于聚焦元素本身，因此特别适合「父容器监听子元素聚焦状态」的场景——比如导航栏展开后，只要菜单项、搜索框或关闭按钮之一有焦点，整个下拉区域就应保持可见。
关键点在于：它天然支持键盘导航（无障碍友好），且无需 JS 监听事件或操作 class；但要注意，它不触发鼠标移出时的自动隐藏，失焦隐藏必须靠其他机制配合。
用 :focus-within 控制下拉菜单显隐的最小可行结构
核心思路是让导航触发器（如 .nav-toggle）和下拉区域（如 .dropdown-menu）同属一个父容器，并对该父容器应用 :focus-within 控制显示逻辑。
<nav class="nav-container"><button class="nav-toggle">☰</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul></nav>
对应的 CSS：
.dropdown-menu {
display: none;
}
.nav-container:focus-within .dropdown-menu {
display: block;
}
注意几个实操细节：
-
.nav-toggle必须是可聚焦元素（<button></button>默认可聚焦，<div> 需加 <code>tabindex="0"） - 下拉菜单里的所有交互元素（
<a></a>、<input>、<button></button>）也必须可聚焦（<a href></a>默认可，<span></span>不行） - 若菜单内含
tabindex="-1"元素，它不会触发:focus-within，因为不可通过键盘聚焦 - 点击菜单外区域，菜单不隐藏
- 按 Esc 关闭后，焦点未重置，下次点击不响应
- 给菜单外区域（如
body或遮罩层）绑定click事件，手动blur()所有子聚焦元素 - 在菜单内所有可聚焦子元素上监听
blur，并用setTimeout延迟判断是否焦点已完全离开容器（因 blur → focus 会连续触发）
如何实现「失焦即隐藏」——仅靠 :focus-within 不够
:focus-within 只管“有焦点时显示”，但浏览器不会在所有子元素失焦后自动让父容器退出该状态——除非焦点彻底离开整个 .nav-container。这意味着：用户 Tab 出菜单、再 Tab 到页面其他地方，才会隐藏；但如果焦点移到菜单外的空白处（比如 body），.nav-container 仍保持 :focus-within 状态，菜单不收起。
常见错误现象：
解决方法只有两个可靠路径：
更稳妥的做法是混合使用：CSS 控制“有焦点时显示”，JS 控制“点击外部时强制失焦”：
document.addEventListener('click', (e) => {
const container = document.querySelector('.nav-container');
if (!container.contains(e.target)) {
container.querySelectorAll('[tabindex], button, a[href]').forEach(el => el.blur());
}
});
兼容性与降级处理要点
:focus-within 在 Chrome 60+、Firefox 61+、Safari 15.4+、Edge 79+ 支持良好，但 iOS Safari 15.2–15.3 有 bug：表单控件聚焦时不触发父级 :focus-within。如果需支持这些版本，不能只依赖它。
性能影响很小，但要注意：
- 不要在深层嵌套结构中滥用（比如
div:focus-within div:focus-within …），可能引发渲染层计算开销 - 若导航栏含大量可聚焦项（如 20+ 菜单项），每次聚焦都会触发样式重算，虽无明显卡顿，但建议用
will-change: transform微调动画性能
最易被忽略的一点：很多开发者以为给 .nav-container 加 tabindex="-1" 就能让它被 :focus-within 捕获，其实没用——tabindex="-1" 只允许脚本聚焦，不能通过键盘 Tab 进入，所以无法触发 :focus-within。必须确保至少有一个子元素是自然可 Tab 的。
