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>

使整个BS4导航栏（在小屏幕上）区域可单击，因此您触摸的任何地方都可以显示/隐藏子菜单？

1 个答案: