网站下拉菜单内锚链接点击仅偶尔生效问题排查求助

开发者阿泽

2026-9-26

下拉菜单锚链接点击失效问题解决方案

问题根因

当前下拉菜单的显示逻辑完全依赖按钮的:focus状态触发，点击下拉菜单内部的链接时，按钮会立刻失去焦点，对应的ul会立即恢复opacity: 0、pointer-events: none的默认样式，大概率在浏览器触发链接跳转之前，点击事件就会因为目标元素失去交互权限而失效，和过渡动画时长没有关联。

修复方案

将下拉菜单的显示触发选择器修改为父容器的:focus-within和:hover状态，这样只要鼠标停留在下拉菜单所属的父容器区域、或者父容器内任意元素处于聚焦状态，下拉菜单就会保持显示，不会因为按钮失焦提前消失。

只需替换CSS中最后一段下拉菜单显示的规则即可：

/* 替换原有 .Python button:focus+ul, .cPP button:focus+ul 规则 */
.Python:focus-within ul,
.cPP:focus-within ul,
.Python:hover ul,
.cPP:hover ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}