实现Bootstrap移动端汉堡菜单点击导航项后自动关闭

我Bootstrap经验不足，从网上找了一段导航栏代码，不太清楚其中JavaScript的工作原理，现在想实现移动端汉堡菜单在点击导航栏选项后自动关闭，寻求技术帮助。

导航栏代码如下：

<!-- Page Navbar -->
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
    <div class="container">
        <a class="logo" href="index.html">Portfolio</a>         
        <ul class="nav">
            <li class="item">
                <a class="link" href="#home">Home</a>
            </li>
            <li class="item">
                <a class="link" href="#about">About</a>
            </li>
            <li class="item">
                <a class="link" href="#portfolio">Portfolio</a>
            </li>
            <li class="item">
                <a class="link" href="#testmonial">Testmonial</a>
            </li>
            <li class="item">
                <a class="link" href="#blog">Blog</a>
            </li>
            <li class="item">
                <a class="link" href="#contact">Contact</a>
            </li>
            <li class="item ml-md-3">
                <a href="components.html" class="btn btn-primary">Components</a>
            </li>
        </ul>
        <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </a>
    </div>          
</nav><!-- End of Page Navbar -->

实现步骤 #

你的汉堡菜单应该是通过切换CSS类来控制显示/隐藏的（比如点击汉堡按钮时会给它加hamburger--is-active类，同时给.nav加展开类），只需要给所有导航选项添加点击事件，触发时还原这些类即可：

1. 添加以下JavaScript代码到你的项目中（可以放在页面底部或外部JS文件里）：

// 获取汉堡按钮和导航菜单元素
const navToggle = document.getElementById('nav-toggle');
const navMenu = document.querySelector('.nav');

// 获取所有导航选项（包括普通链接和按钮）
const navItems = document.querySelectorAll('.nav .link, .nav .btn');

// 遍历所有选项，添加点击事件
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 移除汉堡按钮的激活状态类（和你现有切换逻辑里的类保持一致）
    navToggle.classList.remove('hamburger--is-active');
    // 关闭导航菜单，移除对应的展开类（比如你的代码里可能是'open'或其他类）
    navMenu.classList.remove('open');
  });
});

2. 注意事项：

• 替换代码中的open类为你项目中实际控制导航菜单展开的类名（可以检查点击汉堡按钮时，.nav元素会新增什么类）
• 如果你的项目已经有控制汉堡菜单切换的JS，也可以把这段逻辑整合到现有代码里，避免重复

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