Mouseleave事件触发异常，下拉列表隐藏功能失效求助

问题说明 #

需求：鼠标离开#navbarHint元素时，自动隐藏dropdown-content下拉列表。
问题点：

• 该功能失效，控制台抛出Uncaught TypeError: Cannot read properties of null (reading 'style')异常
• 点击#navbtn调用menuClick函数时功能正常，但通过mouseleave事件调用则报错
• 尝试给#navbtn绑定mouseleave事件也无效

错误原因 #

核心问题出在menuClick函数里的选择器：

let menu = document.querySelector('.dropdown:hover .dropdown-content');

当触发#navbarHint的mouseleave事件时，鼠标已经离开整个导航区域，此时.dropdown元素不再处于:hover状态，这个选择器无法匹配到任何元素，返回null，后续访问menu.style自然会触发类型错误。而点击#navbtn时，鼠标正停留在.dropdown上，选择器能正常找到元素，所以功能正常。

修复方案 #

步骤1：修改下拉菜单的获取方式 #

不再依赖:hover伪类，直接通过固定选择器获取dropdown-content元素，保证始终能拿到DOM元素。

步骤2：调整状态逻辑 #

简化状态控制逻辑，确保mouseleave事件触发时直接隐藏菜单，避免状态反转混乱。

修复后的JavaScript代码 #

// 直接获取下拉菜单元素，无需依赖hover状态
const menu = document.querySelector('.dropdown-content');
let isMenuVisible = false;

// 鼠标离开navbarHint时直接隐藏菜单
document.getElementById('navbarHint').addEventListener('mouseleave', () => {
  menu.style.visibility = 'hidden';
  isMenuVisible = false;
});

// 点击navbtn切换菜单显示状态
document.getElementById('navbtn').addEventListener('click', () => {
  if (isMenuVisible) {
    menu.style.visibility = 'hidden';
  } else {
    menu.style.visibility = 'visible';
  }
  isMenuVisible = !isMenuVisible;
});

可选优化：结合CSS:hover增强交互体验 #

如果需要保留鼠标悬停#navbtn时显示菜单的效果，可以给CSS添加：

.dropdown:hover .dropdown-content {
  visibility: visible;
}

这样鼠标悬停按钮时菜单自动显示，离开按钮或整个navbarHint时自动隐藏，配合JS的点击切换，交互更流畅。

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