Comment fermer automatiquement une barre de navigation Bootstrap après avoir cliqué sur un lien ?

Comment fermer la barre de navigation Bootstrap lors d'un clic sur un lien

Problème :

Vous avez une barre de navigation Bootstrap qui s'effondre sur les appareils mobiles , mais vous souhaitez qu'il se ferme lorsque les utilisateurs cliquent sur liens.

Solution :

Bootstrap 5 (bêta)

• Méthode JavaScript : Ajoutez un écouteur d'événement de clic aux éléments de menu pour basculer la barre de navigation réduire.

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 d'attribut de données : Ajouter les attributs data-bs-toggle="collapse" et data-bs-target=".navbar-collapse.show" vers des liens.

<nav>
    <ul>
        <li>
            <a href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
        </li>
        ...
    </ul>
</nav>

Bootstrap 4

• Méthode jQuery : Utilisez la méthode d'effondrement sur l'élément navbar-collapse.

<ul class="navbar-nav mr-auto">
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

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

• Méthode d'attribut de données : Ajoutez data-toggle="collapse" et data-target=".navbar-collapse.show" attribut aux liens.

<ul>
    <li>
        <a href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
    </li>
    ...
</ul>

Bootstrap 3

• Attribut de données Méthode : Ajoutez les attributs data-toggle="collapse" et data-target=".navbar-collapse.show" à liens.

<ul>
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

• Méthode jQuery : Utilisez la méthode d'effondrement sur l'élément navbar-collapse.

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

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!