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 devrait faire l'affaire.

Nécessite bootstrap.js.

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

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

Cela revient à ajouter les attributs "data-toggle="collapse"" et "href="yournavigationID"" aux balises des menus de navigation.

Answer 2

J'utilise la fonction mollwe, mais j'ai ajouté 2 améliorations :

a) Eviter la fermeture de la liste déroulante si le lien cliqué est effondré (y compris les 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');
                    }
                });

            });

Answer 3

Ce n'est 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 ! Maintenant vous pouvez vérifier la visibilité de votre bouton (avec jquery) comme :

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

(NOTE : Ceci est juste un extrait de code ! 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 : Aucun bug si vous utilisez la "vue plein écran" de Bootstrap (largeur de plus de 940px).

Salutations Ralph

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

Answer 4

Cela a marché pour moi. J'ai fait comme, quand je clique sur le bouton du menu, j'ajoute ou je supprime la classe 'in' parce qu'en ajoutant ou en supprimant cette classe, la bascule fonctionne par défaut. e.stopPropagation()' est pour arrêter l'animation par défaut par bootstrap (je suppose) vous pouvez également utiliser le 'toggleClass' au lieu d'ajouter ou de supprimer la 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();
        }

    });

Answer 5

Solution Bootstrap 4 sans aucun Javascript

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

Assurez-vous de fournir le bon id sur data-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>