如何实现点击导航链接后自动隐藏响应式汉堡导航栏？

修改方案 #

你只需要调整JS代码，把汉堡菜单触发的导航切换逻辑封装为公共函数，再给所有导航链接绑定点击事件，触发关闭逻辑即可，修改后的完整JS代码如下：

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  const navLinkAnchors = document.querySelectorAll('.nav-links li a');

  // 封装导航切换公共逻辑
  const toggleNav = () => {
    // 切换导航展开/收起状态
    nav.classList.toggle('nav-active');

    // 处理链接动画
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
      }
    });
    // 切换汉堡菜单动画
    burger.classList.toggle('toggle');
  }

  // 汉堡菜单点击触发切换
  burger.addEventListener('click', toggleNav);

  // 导航链接点击关闭导航
  navLinkAnchors.forEach(anchor => {
    anchor.addEventListener('click', () => {
      // 仅在导航展开状态下执行关闭，不影响桌面端正常交互
      if(nav.classList.contains('nav-active')) {
        toggleNav();
      }
    })
  })
}

navSlide();

修改完成后，移动端点击导航链接跳转对应锚点的同时，导航栏会自动收起，汉堡图标也会同步恢复为初始状态，无需手动点击关闭。

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