Wie schließe ich eine zusammenklappbare Bootstrap-Navigationsleiste nach dem Klicken auf einen Link automatisch?

So verbergen Sie die zusammenklappbare Bootstrap 4-Navigationsleiste beim Klicken

Problem:

Sie haben Es wurde eine zusammenklappbare Bootstrap-Navigationsleiste erstellt, die sich problemlos öffnen lässt, aber auch nach der Navigation zu verschiedenen Abschnitten geöffnet bleibt. Sie möchten, dass es automatisch geschlossen wird, wenn ein Benutzer auf einen Link klickt.

Lösung:

Bootstrap 5 (Beta):

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

Verwenden von Datenattributen:

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

Bootstrap 4:

Verwenden jQuery:

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

Verwenden von Datenattributen:

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

Bootstrap 3:

Verwenden jQuery:

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

Verwenden von Datenattributen:

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

Durch die Implementierung einer dieser Methoden wird Ihre reduzierbare Bootstrap-Navigationsleiste immer dann geschlossen, wenn ein Benutzer darauf klickt auf einem Link, der ein nahtloses und benutzerfreundliches Navigationserlebnis bietet.

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