Bootstrap ferme le menu réactif "au clic".

Question

En cliquant sur "PRODUITS", j'ai fait apparaître une division blanche (comme dans la pièce jointe). En responsive (mobile et tablette), je voudrais fermer automatiquement la navbar responsive et ne montrer que la barre blanche.

J'ai essayé :

$('.btn-navbar').click();  

également essayé :

$('.nav-collapse').toggle();

Et ça marche. Cependant, en taille de bureau, il est également appelé et fait quelque chose de funky au menu où il rétrécit pendant une seconde.

Des idées ?

Answer 1

Vous n'avez pas à ajouter de javascript supplémentaire à ce qui est déjà inclus avec l'option collapse de bootstraps. Il vous suffit d'inclure les sélecteurs data-toggle et data-target dans les éléments de votre liste de menus, comme vous le faites pour le bouton navbar-toggle. Ainsi, pour votre élément de menu "Produits", cela ressemblerait à ceci

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Vous devrez alors répéter les sélecteurs data-toggle et data-target pour chaque élément de menu.

EDIT ! !! Afin de résoudre les problèmes de débordement et de scintillement, j'ai ajouté du code supplémentaire qui résoudra ce problème sans avoir de javascript supplémentaire. Voici le nouveau code :

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Le voici au travail http://jsfiddle.net/jaketaylor/84mqazgq/

Cela rendra vos sélecteurs de bascule et de cible spécifiques à la taille de l'écran et éliminera les problèmes sur le grand menu. Si quelqu'un a encore des problèmes avec les glitches, faites-le moi savoir et je trouverai une solution. Merci

EDIT : Dans le bootstrap v4.1.3 & v5.0 je ne pouvais pas utiliser les classes visible/caché. Au lieu de hidden-xs utiliser d-none d-sm-block et au lieu de visible-xs utiliser d-block d-sm-none .

EDIT : Dans bootstrap v5, au lieu de data-toggle utiliser data-bs-toggle et au lieu de data-target utiliser data-bs-target .

Answer 2

Je l'ai fait fonctionner avec l'animation !

Menu en html :

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Lier l'événement de clic sur tous les éléments a de la navigation pour réduire le menu (plugin Bootstrap collapse) :

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDIT Pour le rendre plus générique, nous pouvons utiliser l'extrait de code suivant

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Answer 3

J'ai vraiment aimé l'idée de Jake Taylor de le faire sans JavaScript supplémentaire et en tirant parti de la fonction d'effondrement de Bootstrap. J'ai découvert qu'il est possible de résoudre le problème de "scintillement" présent lorsque le menu n'est pas en mode réduit en modifiant la propriété data-target pour inclure légèrement le in classe. Donc ça ressemble à ça :

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

Je ne l'ai pas testé avec des menus déroulants imbriqués, donc à voir.

Answer 4

Pour être complet, dans Bootstrap 4.0.0-beta en utilisant .show ça a marché pour moi...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

Answer 5

Je suppose que vous avez une ligne comme celle-ci définissant la zone de navigation, d'après les exemples de Bootstrap et tout le reste

<div class="nav-collapse collapse" >

Il suffit d'ajouter les propriétés comme telles, comme sur le bouton MENU

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

J'ai ajouté à <body> aussi, ça a marché. Je ne peux pas dire que je l'ai profilé ou quoi que ce soit, mais il me semble que c'est un plaisir... jusqu'à ce que vous cliquiez sur un endroit aléatoire de l'interface utilisateur pour ouvrir le menu, ce qui n'est pas très bon.

DK