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

J'ai trouvé une solution facile pour cela. Il suffit d'ajouter le code de basculement du bouton sur les liens de la barre de navigation aussi. Dans l'exemple ci-dessous se trouve le code data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" .

Cela fermera le menu lorsqu'on cliquera dessus et suivra le lien

    <!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button --> 
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse nav-format-mobile" id="navbarTogglerDemo02">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!--https://stackoverflow.com/a/65365121/5763690-->
                <li class="nav-item">

<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" aria-current="page" [routerLink]="'about'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">About</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Services
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="why-us" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Overview</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="project" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For companies</a></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="startups" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For Startups</a></li>
                    <li><a class="dropdown-item" [routerLink]="'/services'" fragment="ngos" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For NGOs</a></li>
                  </ul>
                </li>
                <li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" [routerLink]="'products'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Products</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'career'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Career</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'contact'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Contact</a>
                </li>
              </ul>
            </div>

Answer 2

Vous pouvez utiliser

ul.nav {
    display: none;
}

Cela fermera par défaut la barre de navigation. Faites-moi savoir si quelqu'un trouve cela utile.

Answer 3

Si, par exemple, votre icône à bascule n'est visible que sur les très petits appareils, vous pouvez procéder comme suit :

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

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

Answer 4

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

Answer 5

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 le basculement de la navigation, la classe 'in' est ajoutée et retirée du basculement. vérifie si le menu réactif est ouvert puis effectue le basculement de fermeture.

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