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

Cela fonctionne, mais ne s'anime pas.

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

Answer 2

Dans le HTML, j'ai ajouté une classe de lien naval au a de chaque lien de navigation.

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

Answer 3

Cette solution fonctionne très bien, sur le bureau et sur le mobile.

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

Answer 4

Pour préciser la solution de l'utilisateur 1040259, 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 lors de la sélection d'un élément.

Answer 5

Pour ceux qui utilisent AngularJS et Angular UI Router avec ceci, voici ma solution (en utilisant le toggle de mollwe). Où ".navbar-main-collapse" est mon "data-target".

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');
                }
            });
        }
    };
}]);

Directive d'utilisation :

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