Wie schließe ich ein Bootstrap-Responsive-Menü beim Klicken auf ein Element automatisch?

Bootstrap: Responsives Menü beim Klicken auf Menüelement automatisch schließen

Wenn Sie reaktionsfähige Menüs in Bootstrap anzeigen, möchten Sie möglicherweise das Menü automatisch schließen nachdem auf einem Mobil- oder Tablet-Gerät auf einen Menüpunkt geklickt wurde, während der geöffnete Zustand auf dem Desktop erhalten bleibt.

Problem:

Der Benutzer hat versucht, $('.btn -navbar').click(); und $('.nav-collapse').toggle(); Um dieses Verhalten zu erreichen, wurde das Menü auf dem Desktop jedoch unerwartet verkleinert.

Lösung:

Um dieses Problem zu beheben, ändern Sie Ihre Menüelemente so, dass sie die Datenumschaltung enthalten und Datenzielattribute, wie Sie es mit der Umschalttaste der Navigationsleiste tun würden. Zum Beispiel für den Menüpunkt „Produkte“:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Wiederholen Sie dies für jeden Menüpunkt.

Zusätzliche Korrekturen:

Zur Adresse Bei Überlaufproblemen und Flackern fügen Sie den folgenden Code hinzu:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Dadurch werden die Umschalt- und Zielselektoren bildschirmgrößenspezifisch angepasst, wodurch Störungen im größeren Menü vermieden werden.

Bootstrap-Version Updates:

• Bootstrap v4.1.3 & v5.0: Ersetzen Sie sichtbare/versteckte Klassen durch d-none d-sm-block und d-block d-sm -keine.
• Bootstrap v5: Ersetzen Sie data-toggle durch data-bs-toggle und data-target durch data-bs-target.

Durch Implementierung Durch diese Änderungen können Sie das responsive Menü bei Klicks auf Menüelemente automatisch schließen und gleichzeitig seine Funktionalität auf Desktop-Geräten beibehalten.

Das obige ist der detaillierte Inhalt vonWie schließe ich ein Bootstrap-Responsive-Menü beim Klicken auf ein Element automatisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!