Comment fermer une barre de navigation Bootstrap pliable lors d'un clic sur un lien ?

Fermeture d'une barre de navigation Bootstrap pliable en un clic

Bootstrap 5 (bêta)

• Utilisez JavaScript pour ajouter des écouteurs d'événements sur les éléments de menu qui ferment le Réduire barre de navigation.

Bootstrap 4

• Ajoutez le composant de réduction aux liens à l'aide de la bascule de données ou utilisez jQuery pour le contrôle.

Bootstrap 3

• Incluez le composant de réduction dans les liens à l'aide de la bascule de données ou utilisez jQuery pour masquer la barre de navigation lors des clics sur les liens.

Voici la solution détaillée pour Bootstrap 3 :

balisage :

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
</ul>

jQuery :

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Cette méthode masquera la barre de navigation pliable après un lien est cliqué, améliorant ainsi l'expérience utilisateur et le flux de navigation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!