Masquer l'effondrement de la nav Twitter Bootstrap au clic

Question

Il ne s'agit pas d'un sous-menu déroulant, la catégorie est class li comme dans l'image :

En sélectionnant une catégorie dans le menu réactif (le modèle est juste une page), je veux masquer la fenêtre de navigation automatiquement lorsqu'on clique dessus. Il est également possible d'utiliser la balade comme navigation, puisque le modèle ne comporte qu'une seule page. page. Je cherche une solution qui ne l'affecte pas, voici le code HTML du menu :

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

Answer 1

Essayez ceci :

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

Answer 2

Je reproduis simplement les 2 attributs de la btn-navbar ( data-toggle="collapse" data-target=".nav-collapse.in" ) sur chaque lien comme ceci :

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

En el Bootstrap 4 Navbar , in est devenu show donc la syntaxe serait :

data-toggle="collapse" data-target=".navbar-collapse.show"

Answer 3

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

Answer 4

Mieux vaut utiliser les méthodes par défaut de collapse.js ( Docs V3 , Docs V4 ):

$('.nav a').click(function(){
    $('.nav-collapse').collapse('hide');
});

Answer 5

Encore plus élégant, sans une once de code dupliqué, est d'appliquer simplement la fonction data-toggle="collapse" y data-target=".nav-collapse" à la nav elle-même :

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Super propre, pas de JavaScript nécessaire. Fonctionne très bien, tant que votre nav a sont suffisamment rembourrés pour les gros doigts, et vous n'empêchez pas le bouillonnement des événements de clics par le biais de e.stopPropagation() lorsque les utilisateurs cliquent sur nav a articles.