时间戳

首页 > 解决方案 > 单击选定的目标 HTML CSS 后，移动设备上的导航栏不会隐藏

javascript - 单击选定的目标 HTML CSS 后，移动设备上的导航栏不会隐藏

问题描述

所以我的网站上有一个导航栏。一切都很完美，除了我在移动设备上的导航栏。

基本上，每当我从导航栏中单击任何 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>

标签： javascripthtmlcssnavbarnav

解决方案

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

例子：

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

那样的东西...

推荐阅读