Bootstrap ferme le menu réactif "sur clic"

Sur "PRODUITS", cliquez sur Je fais glisser un div blanc (comme indiqué ci-joint). En réactif (mobile et tablette), je voudrais fermer automatiquement la barre de navigation responsive et n'afficher que la barre blanche.

J'ai essayé:

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

a également essayé:

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

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

Des idées?

Je l'ai pour travailler 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>

Événement de clic de liaison sur tous les éléments 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');
     });
 });

Vous n'avez pas besoin d'ajouter de javascript supplémentaire à ce qui est déjà inclus avec l'option de réduction de bootstraps. Au lieu de cela, incluez simplement les sélecteurs de basculement de données et de cible de données sur les éléments de votre liste de menu, comme vous le faites avec votre bouton de basculement de la barre de navigation. Donc, pour votre élément de menu Produits, cela ressemblerait à ceci

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

Ensuite, vous devrez répéter les sélecteurs de basculement de données et de cible de données pour chaque élément de menu

ÉDITER!!! Afin de résoudre les problèmes de débordement et de scintillement sur ce correctif, j'ajoute du code supplémentaire qui résoudra ce problème et je n'ai toujours pas 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 bascule et cible spécifiques à la taille de l'écran et éliminera les problèmes dans le menu plus grand. Si quelqu'un a toujours des problèmes avec des problèmes, veuillez me le faire savoir et je trouverai une solution. Merci

EDIT : Dans le bootstrap v4.1.3, je ne pouvais pas utiliser de classes visibles / cachées. Au lieu d' hidden-xsutiliser d-none d-sm-blocket au lieu d' visible-xsutiliser d-block d-sm-none.

Je pense que vous êtes partout dans l'ingénierie.

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDIT: Pour prendre en charge les sous-menus, assurez-vous que leur ancre à bascule contient la classe dropdown-toggle.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: Ajout de la prise en charge du téléphone tactile.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

J'ai vraiment aimé l'idée de Jake Taylor de le faire sans JavaScript supplémentaire et de profiter de la bascule d'effondrement de Bootstrap. J'ai trouvé que vous pouvez corriger le problème de "scintillement" présent lorsque le menu n'est pas en mode réduit en modifiant data-targetlégèrement le sélecteur pour inclure la inclasse. Cela ressemble donc à ceci:

<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 / menus imbriqués, donc YMMV.

juste pour être complet, dans Bootstrap 4.0.0-beta, l'utilisation de .show a fonctionné pour moi ...

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

Je suppose que vous avez une ligne comme celle-ci définissant la zone de navigation, basée sur des exemples Bootstrap et tous

<div class="nav-collapse collapse" >

Ajoutez simplement les propriétés en tant que telles, comme sur le bouton MENU

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

J'ai aussi ajouté <body>, travaillé. Je ne peux pas dire que je l'ai profilé ou quoi que ce soit, mais cela me semble un régal ... jusqu'à ce que vous cliquiez sur un endroit aléatoire de l'interface utilisateur pour ouvrir le menu, donc pas si bien que ça.

NSP

Cela fonctionne, mais n'anime pas.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Dans le code HTML j'ai ajouté une classe de nav-lien à une étiquette de chaque lien de navigation.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

cette solution fonctionne bien, sur ordinateur de bureau et mobile.

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

Juste pour expliquer la solution de user1040259, ajoutez ce code à votre $ (document) .ready (function () {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

Comme ils le mentionnent, cela n'anime pas le mouvement ... mais cela ferme la barre de navigation sur la sélection des éléments

Pour ceux qui utilisent AngularJS et Angular UI Router avec cela, voici ma solution (en utilisant la bascule de mollwe). Où ".navbar-main-collapse" est ma "cible de données".

Créer une directive:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

Utiliser la directive:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Cela devrait faire l'affaire.

Nécessite bootstrap.js.

Exemple => http://getbootstrap.com/javascript/#collapse

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

Cela fait la même chose que l'ajout des attributs 'data-toggle = "collapse"' et 'href = "yournavigationID"' aux balises des menus de navigation.

J'utilise la fonction mollwe, même si j'ai ajouté 2 améliorations:

a) Évitez la fermeture de la liste déroulante si le lien sur lequel vous avez cliqué est réduit (y compris d'autres liens)

b) Masquez également la liste déroulante si vous cliquez sur le contenu Web visible.

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Pas le fil le plus récent, mais j'ai cherché une solution pour le même problème et j'en ai trouvé une (un mélange de quelques autres).

J'ai donné le NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

un identifiant / identifiant comme:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Pas la meilleure "idée" - mais: ça marche pour moi! Vous pouvez maintenant vérifier la visibilité de votre bouton (avec jquery) comme:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(REMARQUE: Ceci est juste un code extrait! J'ai utilisé un événement "onclick" sur mes liens de navigation! (Démarrage d'un registre AJAX.)

Le résultat est: Si le bouton est "visible", il a été "cliqué" ... Donc: pas de bug si vous utilisez la "vue plein écran" de Bootstrap (largeur supérieure à 940px).

Salutations Ralph

PS: Cela fonctionne bien avec IE9, IE10 et Firefox 25. Je n'ai pas vérifié les autres - Mais je ne vois pas de problème :-)

Cela a fonctionné pour moi. J'ai fait comme, lorsque je clique sur le bouton de menu, j'ajoute ou supprime la classe «in» car en ajoutant ou en supprimant cette classe, la bascule fonctionne par défaut. 'e.stopPropagation ()' est d'arrêter l'animation par défaut par bootstrap (je suppose), vous pouvez également utiliser le 'toggleClass' au lieu d'ajouter ou de supprimer une classe.

$ ('# ChangeToggle'). On ('click', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Vous cau utiliser

ul.nav {
    display: none;
}

Cela fermera par défaut la barre de navigation. S'il vous plaît laissez-moi savoir que quelqu'un trouve cela utile

Si, par exemple, votre icône à bascule n'est visible que pour les très petits appareils, vous pouvez faire quelque chose comme ceci:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Cliquer sur [data-toggle = "offcanvas"] ajoutera le .hidden-xs de bootstrap à mon # menu latéral qui masquera le contenu du menu latéral, mais redeviendra visible si vous augmentez la taille de la fenêtre.

si le menu html est

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

sur la bascule de navigation, la classe «dans» est ajoutée et supprimée de la bascule. Vérifiez si le menu réactif est ouvert, puis effectuez la bascule de fermeture.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Tuggle Nav Close, réponse compatible avec le navigateur IE, sans aucune erreur de console. Si vous utilisez bootstrap, utilisez ceci

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

$('.navbar-toggle').trigger('click');

Solution Bootstrap 4 sans Javascript

Ajouter des attributs data-toggle="collapse" data-target="#navbarSupportedContent.show" au div<div class="collapse navbar-collapse">

Assurez-vous de fournir le bon idendata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show est d'éviter le scintillement du menu dans les grandes résolutions

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>