Comment fermer automatiquement une barre de navigation Bootstrap pliable après un clic sur le lien ?

Comment masquer la barre de navigation Bootstrap 4 pliable en un clic

Problème :

Vous avez a créé une barre de navigation Bootstrap pliable qui s'ouvre en douceur, mais elle reste ouverte même après avoir navigué vers différentes sections. Vous souhaitez qu'il se ferme automatiquement lorsqu'un utilisateur clique sur un lien.

Solution :

Bootstrap 5 (bêta) :

Utilisation JavaScript :

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

Utilisation des attributs de données :

<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>

Bootstrap 4 :

Utilisation jQuery :

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

Utilisation des attributs de données :

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

Bootstrap 3 :

Utilisation jQuery :

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

Utilisation des attributs de données :

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

En implémentant l'une de ces méthodes, votre barre de navigation Bootstrap pliable se fermera chaque fois qu'un utilisateur clique sur un lien, offrant une expérience de navigation transparente et conviviale.

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!