Wie schließe ich Responsive Nav mit Klick auf das Produktmenü in Bootstrap?

Responsive Navigation mit Produktmenü-Klick in Bootstrap schließen

Beim Erweitern des Hauptmenüs im Responsive-Modus kann es zu Problemen mit der automatischen Minimierung kommen, wenn Klicken Sie auf den Menüpunkt „PRODUKTE“. Um dieses Problem zu lösen, können Sie die integrierten Datenattribute und Klassen von Bootstrap nutzen.

Anstatt zusätzliches JavaScript zu verwenden, fügen Sie die folgenden Datenattribute zu Ihren Menülistenelementen hinzu:

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

Wiederholen Sie dies für jeden Menüpunkt.

Zusätzliche Anpassungen für Responsive Design

Um Probleme mit überlaufendem Inhalt und Flackern auf größeren Bildschirmen zu beheben, verwenden Sie den folgenden Code:

<li><a href="#products">

Dadurch werden spezifische Datenattribute basierend auf der Bildschirmgröße zugewiesen, wodurch Störungen in Desktop-Menüs vermieden werden.

Aktualisierung für Bootstrap-Versionen

Für Bootstrap-Versionen 4.1.3 und 5.0 Ersetzen Sie die sichtbaren/versteckten Klassen durch d-none d-sm-block und d-block d-sm-none.

Ändern Sie in Bootstrap 5 die Datenattribute in data-bs-toggle und data-bs -Ziel.

Mit diesen Anpassungen können Sie die responsive Navigationsleiste automatisch schließen und das Produktmenü ohne Funktionsprobleme auf verschiedenen Bildschirmgrößen anzeigen.

Das obige ist der detaillierte Inhalt vonWie schließe ich Responsive Nav mit Klick auf das Produktmenü in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!