Сделайте всю область BS4 Navbar (на маленьких экранах) кликабельной, чтобы при прикосновении к ней отображалось / скрывалось подменю?

Question

Вместо того, чтобы просто иметь кнопку , я хочу, чтобы вся область панели навигации была сенсорной .Я думаю, это можно сделать, просто изменив настройки панели навигации BS4 по умолчанию:

HTML:

<nav id="menu-navbar" class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
        aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>    
        <a class="navbar-brand" href="#">{{site.title}}</a>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <div class="navbar-nav float-right text-right pr-3">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="purgatorio-anim.html">Animación</a>
                <a class="nav-item nav-link" href="purgatorio-inter.html">Interacción</a>
                <a class="nav-item nav-link" href="purgatorio-blog.html">Textual/Blog</a>
                <a class="nav-item nav-link" href="acerca.html">Acerca</a>
                <a class="nav-item nav-link" href="contacto.html">Contacto</a>
            </div>
        </div>
</nav>

Answer 1

Одним из подходов для этого является регистрация слушателя на событии click на панели навигации.После этого, и только в том случае, если кнопка видна (т. Е. Сворачивается панель навигации), вы можете разрешить этому событию click переключать складной элемент, являющийся частью панели навигации.Проверьте следующий пример:

$(document).ready(function()
{
    $("#menu-navbar").on("click", () =>
    {
        // Find toggler button.
        
        var tBtn = $(this).find(".navbar-toggler");

        // Check if button is visible (navbar is collapsed). In this case
        // toggle the collapsible element.

        if (tBtn.is(":visible"))
           $(this).find(".collapse").collapse("toggle");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav id="menu-navbar" class="navbar navbar-expand-lg navbar-light bg-light">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">NAVBAR</a>

  <div class="collapse navbar-collapse" id="navbarToggler">
    <div class="navbar-nav float-right text-right pr-3">
      <a class="nav-item nav-link active" href="#">
        Home <span class="sr-only">(current)</span>
      </a>
      <a class="nav-item nav-link" href="purgatorio-anim.html">
        Animación
      </a>
      <a class="nav-item nav-link" href="purgatorio-inter.html">
        Interacción
      </a>
      <a class="nav-item nav-link" href="purgatorio-blog.html">
        Textual/Blog
      </a>
      <a class="nav-item nav-link" href="acerca.html">
        Acerca
      </a>
      <a class="nav-item nav-link" href="contacto.html">
        Contacto
      </a>
    </div>
  </div>

</nav>