Comment puis-je fermer mon menu bootstrap 4 navbar collapse en cliquant en dehors du menu?

Question

Cette barre de navigation est réduite pour toutes les tailles de navigateur. Je me demande comment être capable de fermer le menu étendu en cliquant en dehors du menu. Alors que le bouton bascule n'est pas le seul moyen de le fermer.

J'ai essayé quelques recommandations pour Bootstrap 3, l'une d'elles étant le code Javascript inclus ci-dessous, mais elles ne semblent pas fonctionner.

Il est probablement utile de dire que je ne connais pas très bien Javascript ou PHP, mais je suis ouvert à toutes vos suggestions. Merci!

<nav class="navbar navbar-inverse bg-faded"> 
       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
       </button> 
       <span class="navbar-text">&nbsp;</span> 
       <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
       <ul class="navbar-nav flex-column"> 
        <li class="nav-item active"> 
        <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="http://touruapp.com/support-2/">Support</a> 
        </li> 
        <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Legal 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a> 
         <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a> 
        </div> 
        </li> 
       </ul> 
       </div> 
      </nav> 

      <script> 
      $(document).click(function (event) { 
       var clickover = $(event.target); 
       var $navbar = $(".navbar-collapse");    
       var _opened = $navbar.hasClass("in"); 
       if (_opened === true && !clickover.hasClass("navbar-toggle")) {  
        $navbar.collapse('hide'); 
       } 
      }); 
      </script> 

Answer 1

Si vous utilisez Bootstrap 4, Essayez cette JQuery

au lieu de se cacher appliquer cliquez sur toggler $(".navbar-toggler").click(); et remplacer in avec show classe et navbar-toggle avec navbar-toggler

$(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".navbar-collapse").hasClass("show"); 
     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
      $(".navbar-toggler").click(); 
     } 
    }); 
}); 

violon travail: https://jsfiddle.net/rg43fyhL/

$(document).ready(function() { 
 
    $(document).click(function (event) { 
 
     var clickover = $(event.target); 
 
     var _opened = $(".navbar-collapse").hasClass("show"); 
 
     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
 
      $(".navbar-toggler").click(); 
 
     } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse bg-faded"> 
 
       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
       <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
       <span class="navbar-text">&nbsp;</span> 
 
       <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
       <ul class="navbar-nav flex-column"> 
 
        <li class="nav-item active"> 
 
        <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="http://touruapp.com/support-2/">Support</a> 
 
        </li> 
 
        <li class="nav-item dropdown"> 
 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
         Legal 
 
        </a> 
 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
         <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a> 
 
         <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a> 
 
        </div> 
 
        </li> 
 
       </ul> 
 
       </div> 
 
      </nav>

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• Aucun problème connexe^_^