Wie schließe ich das Bootstrap-Responsive-Menü per Klick?

Bootstrap Responsive Menu per Klick schließen

Beim Anzeigen einer Website auf mobilen Geräten kann die Verwendung eines Navigationsmenüs oft umständlich sein. Um das Benutzererlebnis zu verbessern, ist es wünschenswert, die responsive Navigationsleiste automatisch zu schließen, wenn auf ein Menüelement geklickt wird, sodass nur der gewünschte Inhalt angezeigt wird.

Allerdings können Lösungen wie $('.btn-navbar').click( angewendet werden. ) oder $('.nav-collapse').toggle() kann zu unerwünschten Auswirkungen auf Desktop-Ansichten führen, wie z. B. einem vorübergehenden Verkleinern des Menüs. Erwägen Sie für eine effizientere Lösung die folgenden Maßnahmen:

Verwendung von Datenattributselektoren

Um festzulegen, dass das responsive Menü beim Klicken auf einen Menüpunkt geschlossen werden soll, fügen Sie data-toggle="collapse" und hinzu data-target=".navbar-collapse"-Attribute auf das entsprechende -Element, wie im Folgenden dargestellt Beispiel:

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

Wiederholen Sie diesen Vorgang für jeden Menüpunkt. Dadurch wird die Sichtbarkeit des Menüs basierend auf der Reaktionsfähigkeit des Layouts umgeschaltet.

Behebung von Überlauf- und Flackerproblemen

Wenn bei der oben genannten Lösung Überlauf- oder Flackerprobleme auftreten, wenden Sie sich bitte an uns kann die folgenden Änderungen implementieren:

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

Durch die Zuweisung bildschirmgrößenspezifischer Klassen zu Menüelementen werden diese Probleme effektiv behoben und ein reibungsloser Betrieb gewährleistet unabhängig von der Gerätegröße.

Updates für Bootstrap-Versionen

Für Bootstrap v4.1.3 und v5.0 müssen die sichtbaren/versteckten Klassen durch d-none/d-sm-block und ersetzt werden d-block/d-sm-none.

Ersetzen Sie in Bootstrap v5 die Attribute data-toggle und data-target mit data-bs-toggle bzw. data-bs-target.

Durch Befolgen dieser Richtlinien können Sie sicherstellen, dass Ihr reaktionsfähiges Bootstrap-Navigationsmenü automatisch geschlossen wird, wenn Sie auf Menüelemente klicken, was für ein verbessertes Benutzererlebnis sorgt.

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