如何实现点击导航链接时自动关闭Hamburger菜单？

要实现点击移动端导航链接时自动关闭菜单，只需给所有移动端导航的链接添加点击事件，触发时移除汉堡按钮和移动菜单的is-active类即可，具体修改如下：

修改后的JavaScript代码 #

const menu_btn = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
const mobile_links = mobile_menu.querySelectorAll('a');

// 汉堡按钮点击切换菜单状态
menu_btn.addEventListener('click', function () {
    menu_btn.classList.toggle('is-active');
    mobile_menu.classList.toggle('is-active');
});

// 点击移动端导航链接时关闭菜单
mobile_links.forEach(link => {
    link.addEventListener('click', function () {
        menu_btn.classList.remove('is-active');
        mobile_menu.classList.remove('is-active');
    });
});

代码说明 #

• 通过mobile_menu.querySelectorAll('a')选中移动端导航里的所有链接元素
• 遍历这些链接，给每个链接绑定点击事件
• 在点击事件处理函数中，直接移除汉堡按钮和移动菜单的is-active类，让菜单回到关闭状态，效果和点击汉堡按钮关闭完全一致

将这段代码替换原有的JavaScript部分后，点击移动端导航的任意链接，菜单就会自动关闭。

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