html - 我的 Bootstrap 导航栏可以工作，但是点击时导航栏不会自动折叠，我需要再次按下汉堡选项来关闭它

Question

我一直在使用 Bootstrap 来设置我的第一个网站，我的导航栏作为导航栏运行得非常好。但是，当页面小到足以转换为汉堡菜单时，选择链接时，它会将我导航到正确的位置，但直到我再次按下汉堡时，栏才会隐藏。
我认为这是因为我没有使用正确的 JQuery 或 Bootstrap 脚本(这似乎是最常见的修复程序)，但据我所知，我的初学者知识是最新版本。
我一直在查看过去的答案并使用代码，但无法解决问题。
有什么想法吗？
头中的 HTML

  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<!--Custom CSS-->
<link rel="stylesheet" href="style.css">

导航栏的 HTML

 <!--navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#jill">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#training">Training and Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sessions">Sessions and Fees</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">Contact Me</a>
            </li>
        </ul>
        <span class="navbar-text">
            Here for you when you need it most
        </span>
    </div>
</nav>

页面底部的 HTML 脚本

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<!--smooth scroll-->
<script src="js/smooth-scroll.polyfills.min.js"></script>
<script>
    $(document).on('click', 'a.nav-link', function(event) {
        event.preventDefault();
        console.log("CLICKED ANCHOR!");

        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top - $(".navbar.sticky-top").height()
        }, 500);
    });

</script>

Answer 1

Bootstrap 在单击汉堡时添加了“show”类。因此，要在单击 anchor 标记后关闭菜单，您只需添加以下内容(查看 jsfiddle 以放置在您的代码中):

    $( '#navbarText a' ).on('click', function(){
        $('#navbarText').removeClass('show');
    });

演示: https://jsfiddle.net/Lgh761kd/