如何实现点击导航外部时隐藏导航菜单

问题根源 #

你当前的判断逻辑只检查点击目标是否直接匹配.top-nav，但导航容器的实际标识是id="top-nav"的<header>，且点击导航内部子元素（如链接、按钮、汉堡条）时，event.target指向这些子元素而非容器本身，导致误判为点击外部区域。

解决方案 #

使用Element.closest()方法判断点击元素是否属于导航容器（含容器自身及所有子元素），若不属于则执行取消选中逻辑，同时同步重置汉堡菜单样式与下拉菜单状态：

function myFunction(x) {
  x.classList.toggle("change");
}

function dropdown() {
  document.getElementById("myDropdown").style.display = "block"
}

window.onclick = function(event) {
  // 检查点击元素是否在导航容器内
  const isInsideNav = event.target.closest('#top-nav') !== null;
  const navToggle = document.getElementById("navToggle");
  
  if (!isInsideNav && navToggle.checked) {
    // 取消checkbox选中状态
    navToggle.checked = false;
    // 重置汉堡菜单样式
    document.querySelector('.nav-toggle-container').classList.remove('change');
    // 隐藏下拉菜单
    document.getElementById("myDropdown").style.display = "none";
    console.log("uncheck the nav");
  }
}

关键说明 #

• event.target.closest('#top-nav')会从点击元素向上遍历DOM树，找到最近的id="top-nav"元素，若存在则说明点击在导航内部。
• 同步重置汉堡菜单样式和下拉菜单状态，保证UI与checkbox状态一致。

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