Wie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem Desktop?

Responsives automatisches Schließen des Menüs in Bootstrap

Problem:

Auf einer Bootstrap-Website Das responsive Menü öffnet eine weiße Leiste, wenn auf die Schaltfläche „PRODUKTE“ geklickt wird. Wenn sich die Website jedoch im Desktop-Modus befindet, wird das Menü durch Klicken auf die Schaltfläche unbeabsichtigt verkleinert.

Lösung:

Um zu verhindern, dass das Menü beim Klicken auf einem Desktop ausgeblendet wird, Vermeiden Sie das Hinzufügen von zusätzlichem JavaScript. Ändern Sie stattdessen die Menülistenelemente so, dass sie die Datenumschalt- und Datenzielselektoren enthalten. Zum Beispiel:

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

Wiederholen Sie diesen Schritt für jeden Menüpunkt.

Erweiterte Lösung zur Behebung von Überlaufproblemen:

Um Überlauf und Flackern zu beheben Probleme, integrieren Sie den folgenden Code:

<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 spezifisch für die Bildschirmgröße, wodurch Störungen auf größeren Bildschirmen vermieden werden.

Bootstrap-Versionskompatibilität:

Beachten Sie, dass die sichtbaren/versteckten Klassen in den Bootstrap-Versionen 4.1.3 und 5.0 veraltet sind. Verwenden Sie d-none d-sm-block anstelle von versteckten xs und d-block d-sm-none anstelle von sichtbaren xs. Ersetzen Sie in Bootstrap-Version 5 data-toggle durch data-bs-toggle und data-target durch data-bs-target.

Das obige ist der detaillierte Inhalt vonWie verhindert man das automatische Schließen des Bootstrap-Responsive-Menüs auf dem Desktop?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!