Maison >interface Web >tutoriel CSS >Comment fermer une barre de navigation Bootstrap pliable lors d'un clic sur un lien ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-12-07 16:20:18694parcourir

How to Close a Collapsible Bootstrap Navbar on Link Click?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn