Wie schließe ich eine zusammenklappbare Bootstrap-Navigationsleiste beim Klicken auf einen Link?

Eine zusammenklappbare Bootstrap-Navigationsleiste per Klick schließen

Bootstrap 5 (Beta)

• Verwenden Sie JavaScript, um Ereignis-Listener zu Menüelementen hinzuzufügen, die den Collapse schließen Navigationsleiste.

Bootstrap 4

• Fügen Sie die Minimierungskomponente zu Links hinzu, indem Sie Daten umschalten oder verwenden Sie jQuery zur Steuerung.

Bootstrap 3

• Fügen Sie die ein Reduzieren Sie die Komponente in Links mithilfe der Datenumschaltung oder verwenden Sie jQuery, um die Navigationsleiste bei Linkklicks auszublenden.

Hier ist die detaillierte Lösung für Bootstrap 3:

Markup:

<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>

jQuery:

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

Diese Methode blendet die zusammenklappbare Navigationsleiste danach aus Es wird auf einen Link geklickt, was die Benutzererfahrung und den Navigationsfluss verbessert.

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