Comment puis-je fermer automatiquement ma barre de navigation pliable lors d'un clic sur un lien dans 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>

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');
});

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>

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() 
    })
  }
})

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">

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!