点击ID锚点链接时如何自动关闭移动端汉堡菜单及导航栏

你的汉堡按钮是通过复选框的checked状态联动样式，菜单通过.js-navs的is-open类控制显隐，所以点击锚点链接时只要同时重置这两个状态即可实现需求。

原生JS完整修改代码（和你原有代码风格保持一致） #

/* eslint-env browser */
(function() {
  'use strict';
  document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.js-hamburger');
    const navContainer = document.querySelector('.js-navs');
    
    // 汉堡菜单切换逻辑
    const toggleHamburgerMenu = function () {
      navContainer.classList.toggle('is-open');
    };
    
    // 关闭菜单+复位汉堡的公用方法
    const closeMobileMenu = function() {
      navContainer.classList.remove('is-open');
      if (hamburger) hamburger.checked = false;
    };
    
    if (hamburger) {
      hamburger.addEventListener('click', toggleHamburgerMenu, false);
    }

    // 选中导航内所有锚点链接
    const anchorLinks = document.querySelectorAll('.s-nav a[href^="#"]:not([href="#"])');
    anchorLinks.forEach(link => {
      link.addEventListener('click', closeMobileMenu, false);
    });
  });
})();

代码说明 #

• 提取了closeMobileMenu公用方法，统一处理关闭菜单、复位汉堡两个动作
• 选择器.s-nav a[href^="#"]会匹配导航内所有href以#开头的锚点链接，不会影响普通跳转链接
• 直接修改js-hamburger复选框的checked属性为false，就能自动复位汉堡图标的样式，不需要额外写样式控制逻辑

如果你想用已引入的jQuery实现，代码更简洁：

$(function() {
  const $hamburger = $('.js-hamburger');
  const $navs = $('.js-navs');

  // 汉堡菜单切换
  $hamburger.on('click', function() {
    $navs.toggleClass('is-open');
  });

  // 锚点点击关闭菜单
  $('.s-nav a[href^="#"]').on('click', function() {
    $navs.removeClass('is-open');
    $hamburger.prop('checked', false);
  });
});

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