Wie kann ich per Mausklick aktivierte Dropdowns in Twitter Bootstrap erstellen?

Hover-Dropdown-Menüs für Twitter Bootstrap

Bei der Verwendung des Menüsystems von Twitter Bootstrap kann es wünschenswert sein, dass Menüs beim Hover automatisch heruntergeklappt werden, wodurch dies entfällt die Notwendigkeit, auf den Menütitel zu klicken. Darüber hinaus möchten Benutzer möglicherweise lieber die Navigationspfeile neben den Menütiteln ausblenden.

CSS für Hover-Dropdowns

Um automatische Dropdowns beim Hover zu aktivieren, implementieren Sie das folgende CSS:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Für reaktionsfähige Funktionalität packen Sie den Code in ein Medium ein Abfrage:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

CSS zum Ausblenden von Navigationspfeilen

Bootstrap 3:

Entfernen Sie den HTML-Code vom .dropdown-toggle-Anker Element.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a></p>
<p><strong>Bootstrap 2 und niedriger:</strong></p>
<p>Zielen Sie auf die Pfeile und entfernen Sie sie mit diesem CSS-Selektor und Code:</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

Verstehen Wie diese CSS-Elemente funktionieren, wird Ihre Fähigkeit verbessern, Bootstrap-Menüs an Ihre spezifischen Bedürfnisse anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich per Mausklick aktivierte Dropdowns in Twitter Bootstrap erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!