如何实现移动端导航栏点击链接后自动隐藏？已尝试多方案未奏效求解决建议

嘿，我看了你的代码，问题很明确——你已经实现了汉堡菜单展开/收起导航的功能，但导航链接被点击后没有触发关闭导航的逻辑。下面是最简单的修复方案，还能让你的代码更整洁：

核心思路 #

把关闭导航的逻辑抽成一个可复用的函数，然后给每个导航链接添加点击事件，调用这个函数就行。这样不管是点汉堡菜单还是导航链接，关闭逻辑都一致，还避免了重复代码。

修改后的JavaScript代码 #

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

  // 封装关闭导航的通用函数
  const closeNavigation = () => {
    // 移除导航激活类，让导航滑出去
    nav.classList.remove('nav-active');
    // 重置链接的动画，下次展开时能重新播放
    navLinks.forEach(link => {
      link.style.animation = '';
    });
    // 还原汉堡图标的样式
    burger.classList.remove('toggle');
  }

  // 汉堡菜单的点击逻辑（保留你原来的代码，只是把关闭部分抽出去了）
  burger.addEventListener('click', ()=> { 
    // 切换导航状态
    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 + .5}s`; 
      } 
    }); 

    // 切换汉堡图标动画
    burger.classList.toggle('toggle'); 
  }); 

  // 给每个导航链接添加点击关闭事件
  navLinks.forEach(listItem => {
    const link = listItem.querySelector('a');
    link.addEventListener('click', closeNavigation);
  });
} 
navSlide(); 

为什么这样有效？ #

1. 复用逻辑：closeNavigation函数把关闭导航、重置动画、还原汉堡图标的操作打包在一起，不管是点击汉堡还是导航链接，都能调用这个函数完成关闭。
2. 覆盖所有场景：不管是锚点跳转（比如#home）还是跳转到新页面（比如./theteam.html），点击链接后都会触发关闭：
   • 锚点跳转：页面不刷新，导航栏会立即滑走；
   • 新页面跳转：虽然页面会刷新，但关闭逻辑依然会执行（不影响体验）。

额外小建议 #

如果你的锚点跳转需要滚动到指定位置，这个逻辑也完全兼容——导航关闭后，浏览器会正常执行锚点跳转，不会有冲突。

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