Wie schließe ich das reduzierte Bootstrap 3-Menü beim Klicken auf einen Link?

So schließen Sie das reduzierte Bootstrap 3-Menü beim Klicken auf einen Link

Das reduzierte Navigationsmenü von Bootstrap 3 bietet eine bequeme Möglichkeit, Navigationselemente auszublenden und anzuzeigen kleinere Geräte. Wenn Sie jedoch auf einen Menülink klicken, während das Menü erweitert ist, wird es beim Klicken möglicherweise nicht geschlossen. Dies kann für Benutzer frustrierend sein, da es eine einfache Navigation verhindert.

Lösung

Um dieses Problem zu beheben, können Sie den folgenden Code zu Ihrem Dokument hinzufügen:

$(document).on('click', '.navbar-collapse.in', function(e) {
  if ($(e.target).is('a:not(".dropdown-toggle")')) {
    $(this).collapse('hide');
  }
});

Dieser Code wartet auf Klicks im minimierten Menü und schließt das Menü, wenn das Zielelement kein Dropdown-Schalter ist. Indem Sie Dropdown-Schalter ausschließen, stellen Sie sicher, dass ein Klick auf das Dropdown-Menü selbst dieses nicht schließt.

Implementierung

Um diese Lösung zu implementieren, können Sie den Code in Ihre einbinden JavaScript-Datei oder fügen Sie sie direkt am Ende der Seite vor dem schließenden ein. Tag.

Zusätzliche Hinweise

• Die ursprüngliche Lösung von GitHub, die nur überprüfte, ob das Ziel ein „a“-Element war, konnte Probleme mit Unter-Tags verursachen. Menüs. Die aktualisierte Version sucht stattdessen nach „a:not(".dropdown-toggle"), um dies zu verhindern.
• Diese Lösung gilt nur für Bootstrap 3.x. Für Bootstrap 4 und höher wurde die .in-Klasse durch .show ersetzt.

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