Wie stelle ich sicher, dass meine zusammenklappbare Navigationsleiste bei einem Link-Klick in Bootstrap automatisch geschlossen wird?

Zusammenklappbare Navigationsleiste wird beim Klicken auf einen Link automatisch geschlossen

Sie haben mit Bootstrap 4 eine funktionale zusammenklappbare Navigationsleiste erstellt. Sie möchten sie jedoch automatisch schließen, wenn ein Benutzer einen Link auswählt. Dieser Artikel bietet umfassende Lösungen für Bootstrap 3 und Bootstrap 4, um dieses gewünschte Verhalten zu erreichen.

Lösung für Bootstrap 3

In Bootstrap 3 können Sie die darin enthaltenen Links ändern die Navigationsleiste, um das Attribut „data-toggle“ einzubinden. Dieses Attribut löst ein Minimierungsverhalten aus, wenn auf einen Link geklickt wird.

<ul class="navbar-nav mr-auto">
  <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#about-us">About</a>
  </li>
  <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#pricing">Pricing</a>
  </li>
</ul>

Diese Lösung nutzt die Klassen „collapse“ und „show“, um die Sichtbarkeit der Navigationsleiste zu steuern.

Lösung für Bootstrap 4

Für Bootstrap 4 gibt es zwei Hauptmethoden, um das „Schließen beim Klicken“ zu erreichen. Funktionalität.

Option 1: jQuery-Methode

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

Option 2: JavaScript-Methode mit Datenattributen

<ul class="navbar-nav me-auto">
  <li class="nav-item active" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#about-us">About</a>
  </li>
  <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#pricing">Pricing</a>
  </li>
</ul>

Lösung für Bootstrap 5

Für Bootstrap 5, Sie können entweder die JavaScript-Methode mit Ereignis-Listenern oder die Datenattribut-Methode verwenden.

JavaScript-Methode mit Ereignis-Listenern

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

Datenattribut-Methode

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

Das obige ist der detaillierte Inhalt vonWie stelle ich sicher, dass meine zusammenklappbare Navigationsleiste bei einem Link-Klick in Bootstrap automatisch geschlossen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!