移动端Navbar点击链接仅展开不收起问题排查求助

你的问题核心是：移动端导航栏展开后，点击内部链接无法自动收起，原因很直接——当前代码只给汉堡按钮/关闭按钮（.mobile-nav-toggle）绑定了导航状态切换事件，但导航菜单里的<a>标签完全没触发这个切换逻辑。

解决步骤 #

1. 给导航内的链接绑定收起事件 #

在现有JavaScript代码中，新增对导航栏所有<a>标签的事件监听，让它们点击时调用mobileNavToogle()方法：

const mobileNavShow = document.querySelector('.mobile-nav-show');
const mobileNavHide = document.querySelector('.mobile-nav-hide');

// 监听汉堡/关闭按钮
document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
  el.addEventListener('click', function(event) {
    event.preventDefault();
    mobileNavToogle();
  })
});

// 新增：监听导航内的所有链接
document.querySelectorAll('#navbar ul li a').forEach(link => {
  link.addEventListener('click', function() {
    // 仅当导航处于展开状态时执行收起
    if(document.querySelector('body').classList.contains('mobile-nav-active')) {
      mobileNavToogle();
    }
  });
});

function mobileNavToogle() {
  document.querySelector('body').classList.toggle('mobile-nav-active');
  mobileNavShow.classList.toggle('d-none');
  mobileNavHide.classList.toggle('d-none');
}

2. 可选优化：点击遮罩也收起导航 #

你的CSS通过.mobile-nav-active .navbar:before生成了全屏遮罩，给这个交互区域添加收起逻辑能提升用户体验：

const mobileNavShow = document.querySelector('.mobile-nav-show');
const mobileNavHide = document.querySelector('.mobile-nav-hide');
const body = document.querySelector('body');
const navbar = document.querySelector('#navbar');

// 监听汉堡/关闭按钮
document.querySelectorAll('.mobile-nav-toggle').forEach(el => {
  el.addEventListener('click', function(event) {
    event.preventDefault();
    mobileNavToogle();
  })
});

// 监听导航内链接
document.querySelectorAll('#navbar ul li a').forEach(link => {
  link.addEventListener('click', function() {
    if(body.classList.contains('mobile-nav-active')) {
      mobileNavToogle();
    }
  });
});

function mobileNavToogle() {
  body.classList.toggle('mobile-nav-active');
  mobileNavShow.classList.toggle('d-none');
  mobileNavHide.classList.toggle('d-none');

  // 动态绑定/解绑遮罩点击事件
  if(body.classList.contains('mobile-nav-active')) {
    body.addEventListener('click', handleMaskClick);
  } else {
    body.removeEventListener('click', handleMaskClick);
  }
}

// 遮罩点击处理逻辑
function handleMaskClick(e) {
  // 仅点击遮罩区域（非导航、非按钮）时收起
  if(!navbar.contains(e.target) && !e.target.classList.contains('mobile-nav-toggle')) {
    mobileNavToogle();
  }
}

补充说明 #

• 锚点链接的默认行为不受影响：因为你的链接是锚点（href="#hero"），点击后会先执行导航收起，再自动完成锚点跳转。
• classList.toggle本身自带状态判断，不需要额外写重复逻辑，避免无效执行。

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