如何实现点击焦点菜单内锚点链接时保持菜单不关闭

你要的这套焦点菜单交互没法纯靠CSS完美实现，只需要加几行原生JavaScript就能覆盖全部需求，硬凑CSS方案会有绕不开的体验bug。

纯CSS方案的硬伤 #

你现在写的示例用父元素的:focus状态控制菜单显示，逻辑本身就有问题：菜单里的<a>标签本身是可聚焦元素，一点击链接，焦点就会从带tabindex的父容器转移到链接上，父容器直接失焦，菜单会瞬间隐藏，根本没法正常点中链接。
有人会想到把选择器换成:focus-within，匹配父容器或其任意后代聚焦的状态：

[tabindex="1"]:focus-within .menu {visibility:visible;}

改完确实能解决「点内链菜单关闭」的问题，但马上会出新bug：页面里大部分普通元素（比如段落、空白边距区域）是没有tabindex的，点击这些区域不会触发焦点转移，父容器的:focus-within状态会一直保持，菜单直接挂在页面上关不掉，完全不符合「点击菜单外任意区域关闭」的要求。
CSS本身没有能力检测「点击发生在元素外部」这类交互逻辑，这是它的能力边界决定的，再怎么堆选择器也绕不过去。

极简JS实现方案 #

逻辑非常简单，不用引入任何库，10行以内的原生JS就能搞定所有需求：

• 点击菜单触发按钮时，切换菜单的显示状态
• 点击菜单内部区域时，不触发关闭逻辑
• 点击页面其他任意位置时，关闭菜单

完整可运行代码如下：

[tabindex="1"] {
  display: inline-block;
  position: relative;
}
b {
  cursor: pointer;
}
.menu {
  position: absolute;
  visibility: hidden;
  display: block;
  padding: 10px;
  white-space: nowrap;
  border: 1px solid black;
  background: pink;
  transition: 0.35s ease-out;
  top: 100%;
  left: 0;
}
/* 用类名控制菜单显示，替代原有的:focus选择器 */
[tabindex="1"].show .menu {
  visibility: visible;
}
p:target {
  background: gold;
}

<div tabindex="1" class="menu-wrap">
  <b>&#9776;</b>
  <div class="menu">
    <a href="#01">link 1</a> some text<br>
    some <a href="#02">link 2</a> text
  </div>
</div>

<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>

<script>
const wrap = document.querySelector('.menu-wrap')
// 点击按钮切换菜单显示
wrap.querySelector('b').addEventListener('click', e => {
  e.stopPropagation()
  wrap.classList.toggle('show')
})
// 点击菜单内部阻止事件冒泡，不触发关闭
wrap.querySelector('.menu').addEventListener('click', e => e.stopPropagation())
// 点击页面任意其他位置关闭菜单
document.addEventListener('click', () => wrap.classList.remove('show'))
</script>

这个方案完全满足你提的三个要求：触发元素被点击（获得焦点）时弹出菜单，点菜单内链接不会误关，点菜单外任何区域都能正常关闭，和原生失焦的体验完全一致。

内容的提问来源于stack exchange，提问作者Arsen