Wie schließe ich eine Bootstrap-Navigationsleiste automatisch, nachdem ich auf einen Link geklickt habe?

So schließen Sie die Bootstrap-Navigationsleiste beim Klicken auf einen Link

Problem:

Sie haben eine Bootstrap-Navigationsleiste, die auf Mobilgeräten eingeklappt wird , aber Sie möchten, dass es geschlossen wird, wenn Benutzer darauf klicken Links.

Lösung:

Bootstrap 5 (Beta)

• JavaScript-Methode: Fügen Sie Menüelementen einen Klickereignis-Listener hinzu, um die Navigationsleiste umzuschalten Collapse.

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

Datenattributmethode: Fügen Sie die Attribute data-bs-toggle="collapse" und data-bs-target=".navbar-collapse.show" hinzu zu Links.

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

Bootstrap 4

• jQuery-Methode: Verwenden Sie die Collapse-Methode für das Navbar-Collapse-Element.

• Home
...

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

• Datenattributmethode: data-toggle="collapse" und hinzufügen data-target=".navbar-collapse.show" Attribute zu Links.

• Home
...

Bootstrap 3

• Datenattribut Methode: Fügen Sie die Attribute data-toggle="collapse" und data-target=".navbar-collapse.show" hinzu Links.

• Home
...

• jQuery-Methode: Verwenden Sie die Collapse-Methode für das Navbar-Collapse-Element.

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

Das obige ist der detaillierte Inhalt vonWie schließe ich eine Bootstrap-Navigationsleiste automatisch, nachdem ich auf einen Link geklickt habe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!