前端新手求助：点击锚点标签后汉堡菜单无法关闭如何解决

核心逻辑是给汉堡菜单内的所有锚点链接添加点击事件监听，触发时执行菜单关闭逻辑即可，具体实现步骤如下：

• 第一步确认你的项目里控制汉堡菜单显隐的逻辑：目前常见的实现有两种，一种是给菜单容器/汉堡按钮添加active/show这类CSS类控制显隐，另一种是用checkbox的checked状态配合CSS控制显隐。
• 对应第一种类名控制的场景，添加如下JS代码即可，注意把选择器替换成你项目里实际的ID/类名：

// 获取汉堡菜单内所有锚点链接
const menuAnchorLinks = document.querySelectorAll('.mobile-menu a[href^="#"]');
// 获取汉堡按钮和菜单容器节点
const hamburgerButton = document.getElementById('hamburger-btn');
const mobileMenuContainer = document.querySelector('.mobile-menu');

// 批量绑定点击事件
menuAnchorLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 移除控制菜单展开的激活类
    hamburgerButton.classList.remove('active');
    mobileMenuContainer.classList.remove('show');
    // 如果你已经封装了独立的关闭菜单函数，直接调用即可，比如 closeMenu()
  });
});

• 对应第二种checkbox控制的场景，添加如下JS代码：

const menuAnchorLinks = document.querySelectorAll('.mobile-menu a[href^="#"]');
const menuToggleCheckbox = document.getElementById('menu-toggle');

menuAnchorLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 重置checkbox的选中状态即可触发菜单关闭
    menuToggleCheckbox.checked = false;
  });
});

注意：代码里的选择器需要和你实际HTML结构里的ID、类名保持一致，不要直接硬套使用。

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