Wie schließt man die Bootstrap-Navbar nach einem Klick?

Leon A. -

German: So schließen Sie die Bootstrap-Navbar nach einem Klick

Problem: Bootstrap-Navigationsleiste bleibt nach dem Klicken geöffnet

Die Bootstrap-Navigationsleiste ist ein häufig verwendetes Navigationselement, das jedoch auf mobilen Geräten nach dem Klicken auf einen Link geöffnet bleiben kann. Dies kann Besucher verwirren und die Ansicht des Seiteninhalts behindern. Ein automatisches Schließen der Navigationsleiste nach dem Klicken auf einen Link würde die Benutzererfahrung und die Navigation auf der Website verbessern.

Lösungen zum Schließen der Bootstrap-Navbar

Verwendung von JavaScript-Event-Listenern

Um die Bootstrap-Navbar nach dem Klicken auf einen Link zu schließen, können Sie Klick-Event-Listener zu den Navbar-Links hinzufügen. Diese Methode verwendet JavaScript, um zu erkennen, wenn auf einen Link geklickt wird, und schließt dann die Navbar.

Hier ist ein Code-Beispiel, das diesen Ansatz zeigt:

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')) {
        l.addEventListener('click', () => { 
            bsCollapse.toggle() 
        })
    }
})

Dieser Code wählt alle Navbar-Links aus, fügt jedem einen Klick-Event-Listener hinzu und schaltet den Navbar-Collapse um, wenn auf einen Link geklickt wird. Die Methode bootstrap.Collapse.getOrCreateInstance() steuert das Collapse-Verhalten der Navbar.

Tipp: Standardverhalten verhindern

Um das Standardverhalten des Links (z.B. Navigation zu einer neuen Seite) beim Schließen der Navbar zu verhindern, können Sie event.preventDefault() zu Ihrem Klick-Event-Handler hinzufügen:

l.addEventListener('click', (event) => {
    event.preventDefault();
    bsCollapse.toggle();
})

Dies kann nützlich sein, wenn Sie die Navbar schließen möchten, bevor Sie zur neuen Seite navigieren, oder wenn Sie Single-Page-Application-Routing verwenden.

Implementierung von Datenattributen

Eine andere Methode, um die Bootstrap-Navbar nach dem Klicken auf einen Link zu schließen, ist die Verwendung von Bootstrap's eingebauten Datenattributen. Dieser Ansatz benötigt kein JavaScript und nutzt Bootstrap's eigene Funktionalität.

Um diese Methode zu verwenden, fügen Sie data-bs-toggle="collapse" und data-bs-target=".navbar-collapse.show" zu jedem Navbar-Link hinzu:

<ul class="navbar-nav me-auto">
    <li class="nav-item active">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Noch ein Link</a>
    </li>
</ul>

Diese Datenattribute weisen Bootstrap an, den Collapse-Zustand der Navbar umzuschalten, wenn auf einen Link geklickt wird. Der Selektor .navbar-collapse.show zielt auf die geöffnete Navbar ab und schließt sie, wenn ein Link ausgewählt wird.

Beide Methoden verbessern die Benutzererfahrung auf mobilen Geräten, indem sie die Navbar nach dem Klicken auf einen Link schließen.