当我点击选定的目标HTML CSS时，移动设备上的NavBar不会隐藏

Question

所以我在我的网站上有一个导航栏。这一切都很完美，除了我在手机上的导航栏。

基本上，每当我单击导航栏中的任何href时，它都会将我送到那个href所在的位置，但这样做之后，它并没有关闭导航栏。我需要它以这种方式工作:在我点击导航栏上的href链接后，它会将我发送到那个位置，然后关闭导航栏，这样它就不会出现在我正在搜索的内容的前面。下面是一个视频示例：

https://youtu.be/BWffD2Lew8w

有人知道我怎么解决这个问题吗？下面是我在这一节中使用的代码。非常感谢!

<nav class="navbar fixed-top navbar-expand-lg navbar-dark d-md-inline d-lg-none" id="navbarFunctions" style="background-color: #0f0f0f;">
        <div class="container-fluid">
          <a class="navbar-brand" href="#Inicio"><img src="navbar/LogoWhite.svg" width="200" height="50"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarBtn" aria-controls="navbarBtn" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-end" id="navbarBtn">
            <ul class="navbar-nav" style="font-size: 1.25rem;">
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Inicio">Inicio</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Beneficios">Beneficios</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Como_Funciona">¿Cómo funciona?</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Carta_Muestra">Carta Muestra</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Precios">Precios</a>
                </li>
                <li class="nav-item mx-2">
                  <a class="nav-link" href="#Contacto">Contacto</a>
                </li>
            </ul>
          </div>
        </div>
      </nav>

Answer 1

您必须调用当有人单击其中一个链接时关闭菜单的函数。

示例：

<a class="nav-link" onclick="closeNavbar()" href="#Beneficios">Beneficios</a>

诸如此类的事情。

Answer 2

只需在导航栏的每个锚点标签中添加此切换器，就可以了：

data-toggle="collapse" data-target="#navbarBtn"

像这样

<li class="nav-item mx-2">
   <a class="nav-link" href="#Precios" data-toggle="collapse" data-target="#navbarBtn">Precios</a>
</li>

Answer 3

最近我也遇到了同样的问题。我在我的项目中使用了Bootstrap4，并在使用Bootstrap时像往常一样链接到了html底部的jQuery。我让它这样工作：

链接到html中的javascript文件：

<script src="assets/js/main.js" ></script>

然后尝试将此代码添加到您的javascript文件：

$(document).ready(function () {
    // When the user clicks on a link in the navbar on smaller screens the navbar 
       collapse.
    $('.navbar-nav a').click(function(){
            $(".navbar-collapse").collapse('hide');
        });
});

希望这也适用于你！