如何实现点击导航链接时自动关闭汉堡导航菜单

实现方案 #

你现有代码已经封装了控制导航开关的openCloseNav函数，只需要给导航内的所有链接绑定点击事件，触发导航关闭逻辑即可，修改后的完整JavaScript代码如下：

(function () {
  if (document.querySelector("#top-nav-toggle")) {
    var navToggle = document.querySelector("#top-nav-toggle");
    // 获取所有导航链接
    var navLinks = document.querySelectorAll(".navlink");

    function watchNavClose(e) {
      var topNav = document.querySelector(".top-bar");
      if (!e.path.includes(topNav)) {
        openCloseNav();
        document.documentElement.removeEventListener("click", watchNavClose);
      }
    }

    function openCloseNav() {
      var navToggle = document.querySelector("#top-nav-toggle");

      if (!navToggle.classList.contains("closed")) {
        navToggle.classList.add("closed");
        document.querySelector("#top-bar__nav").classList.remove("collapsed");
        document.querySelector("html").addEventListener("click", watchNavClose);
        document.body.style.overflowY = 'hidden';
      } else {
        document.querySelector("#top-bar__nav").classList.add("collapsed");
        document.documentElement.removeEventListener("click", watchNavClose);
        document.body.style.overflowY = "scroll";
        navToggle.classList.remove("closed");
        }
      }

      document.addEventListener('keydown', e => {
        if ( e.keyCode === 27 ) {
          document.documentElement.removeEventListener("click", watchNavClose);
          document.body.style.overflowY = "scroll";
          navToggle.classList.remove("closed");
          document.querySelector("#top-bar__nav").classList.add("collapsed");
        }
      })

      navToggle.addEventListener("click", openCloseNav);
      // 给每个导航链接绑定点击关闭导航的事件
      navLinks.forEach(link => {
        link.addEventListener("click", () => {
          // 只有导航处于展开状态时才执行关闭逻辑
          if (navToggle.classList.contains("closed")) {
            openCloseNav();
          }
        })
      })
  }
})();

代码说明 #

• 新增了导航链接的获取逻辑，选中所有class为navlink的导航元素
• 给每个导航链接绑定点击事件，判断导航处于展开状态时就调用openCloseNav执行关闭逻辑，避免导航关闭状态下误触发
• 完全复用你现有封装的开关逻辑，不需要调整原有交互逻辑，兼容性和原有功能保持一致

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