单击菜单项后如何关闭菜单答案

【问题标题】：How to Close the menu after click on menu item单击菜单项后如何关闭菜单
【发布时间】：2021-06-20 09:55:01
【问题描述】：

我在网站上有一个菜单。下面是 HTML 代码。

<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
        <div class="container position-relative">
            <a class="navbar-brand" href="./index.html">
                <img class="navbar-brand-regular" src="logo.png"/>
                <img class="navbar-brand-sticky" src="logo.png"/>
            </a>
            <button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-inner">
                <!--  Mobile Menu Toggler -->
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
               <nav>
                    <ul class="navbar-nav" id="navbar-nav">                            
                        <li class="nav-item">
                            <a class="nav-link scroll" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scroll" href="#about">About</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

在移动菜单上，当我单击菜单项时，菜单没有关闭。下面是脚本代码。我错过了什么吗？

// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
    $('[data-toggle="navbarToggler"]').click(function () {
        $('.navbar').toggleClass('active');
        $('body').toggleClass('canvas-open');
    });
    // MAIN MENU TOGGLER ICON
    $('.navbar-toggler').click(function () {
        $('.navbar-toggler-icon').toggleClass('active');
    });

【问题讨论】：

标签： mobile menu

【解决方案1】：

Bootstrap 将自行处理所有切换/折叠，您无需编写额外的 JS。切换按钮不得重复，以免破坏导航栏功能。

下面是答案。我在几个地方优化了你的参数。如果我的答案对您有用，请将其标记为最终答案并投票，以便其他有同样问题的人也能获得帮助。干杯

<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
           <a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a> 
           <div class="collapse navbar-collapse" id="Navbar">
               <ul class="navbar-nav mr-auto">
                    <li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
                    <li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>                   
                </ul>               
            </div>
        </div>         
 </nav>

【讨论】：