Maison > interface Web > tutoriel CSS > Comment puis-je fermer automatiquement ma barre de navigation pliable lors d'un clic sur un lien dans Bootstrap ?

Comment puis-je fermer automatiquement ma barre de navigation pliable lors d'un clic sur un lien dans Bootstrap ?

Patricia Arquette
Libérer: 2024-12-15 22:43:26
original
397 Les gens l'ont consulté

How Do I Make My Collapsible Navbar Automatically Close on Link Click in Bootstrap?

La barre de navigation pliable se ferme automatiquement lors d'un clic sur un lien

Vous avez créé une barre de navigation pliable fonctionnelle à l'aide de Bootstrap 4. Cependant, vous l'aimerais pour se fermer automatiquement lorsqu'un utilisateur sélectionne un lien. Cet article fournit des solutions complètes pour Bootstrap 3 et Bootstrap 4 pour obtenir le comportement souhaité.

Solution pour Bootstrap 3

Dans Bootstrap 3, vous pouvez modifier les liens dans la barre de navigation pour incorporer l'attribut 'data-toggle'. Cet attribut déclenche un comportement de réduction lorsqu'un lien est cliqué.

<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>
Copier après la connexion

Cette solution utilise les classes de réduction et d'affichage pour contrôler la visibilité de la barre de navigation.

Solution pour Bootstrap 4

Pour Bootstrap 4, il existe deux manières principales d'accomplir la "fermeture au clic" fonctionnalité.

Option 1 : méthode jQuery

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});
Copier après la connexion

Option 2 : méthode JavaScript avec attributs de données

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

Solution pour Bootstrap 5

Pour Bootstrap 5, vous peut utiliser soit la méthode JavaScript avec les écouteurs d'événements, soit la méthode des attributs de données.

Méthode JavaScript avec les écouteurs d'événements

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
  if (menuToggle.classList.contains('show')) {  // only fire on mobile
    l.addEventListener('click', () => { 
      bsCollapse.toggle() 
    })
  }
})
Copier après la connexion

Méthode des attributs de données

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal