Bootstrap implementiert Dropdown-Menü-Effekt_Javascript-Fähigkeiten

Dropdown-Menü Ein umschaltbares Kontextmenü zum Anzeigen einer Linkliste.

1. Fall

Umschließen Sie den Dropdown-Menü-Trigger und das Dropdown-Menü in .dropdown und fügen Sie dann den HTML-Code hinzu, aus dem das Menü besteht.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Sie können dem obigen Code entnehmen, dass er möglicherweise viele unbekannte Stilklassen oder Attribute enthält.

Eine Dropdown-Schaltfläche und ein kleines Symbol-Caret auf der rechten Seite. Natürlich befinden sich der Text dieses kleinen Symbols und der Schaltfläche auf derselben Ebene.

Stellen Sie zunächst sicher, dass es in der Schaltfläche eine Dropdown-Umschaltfläche und ein Datenumschalt-Attribut gibt. Basierend auf diesem Attribut wird die Dropdown-Liste angezeigt.

Das Dropdown-Menü unmittelbar nach dem ul-Tag sollte in Verbindung mit dem Drop-Down-Schalter der Stilklasse der Schaltfläche oben verwendet werden, und die Schaltfläche oben ist an aria-labelledby gebunden.

Im vierten li-Tag gibt es einen Teiler, der eigentlich eine Stilklasse zum Trennen von Linien ist.

Das ist wahrscheinlich das, was ich verstehe, und mein Verständnis ist definitiv nicht vorhanden.

2. Ausrichtungsoptionen

Fügen Sie .text-right zum Dropdown-Menü .dropdown-menu hinzu, um den Text rechtsbündig auszurichten.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Fügen Sie einfach eine Text-Rechts-Stilklasse zum ul-Tag im obigen Code hinzu.

3. Titel

Eine Gruppe von Aktionen kann in jedem Dropdown-Menü durch Hinzufügen eines Titels identifiziert werden.

 <h1>下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Hauptsächlich hinzufügenb3ff206d9cf8201ea241cbfdc6db3677Dropdown-Headerbed06894275b65c1ab86501b08a632eb Es gibt eine Klasse im .dropdown-header-Stil.

4. Deaktivierte Menüpunkte

Fügen Sie im Dropdown-Menü den Link „.disabled“ zu 25edfb22a4f469ecb59f1190150159c6 hinzu.

Ändern Sie den obigen Code weiter und ersetzen Sie den Code in der Zeile „Etwas anderes hier“

Code kopieren Der Code lautet wie folgt:

644a785d0ab28cca4dcbfc93ca96b4ea e14e09650368a6f7740ec45c14161565Hier noch etwas5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb

Die Hauptsache besteht darin, die Stilklasse .disabled im li-Tag hinzuzufügen.

Sie können den Effekt nach dem Ausführen überprüfen. Tatsächlich ähnelt der Effekt dem oben genannten Titelstil. Wenn Sie darauf klicken, wird ein deaktiviertes Symbol angezeigt.

5. Grundgehäuse

1), Schaltflächen-Dropdown-Menü
Sie können einen Dropdown-Menüauslöser erstellen, indem Sie eine beliebige Schaltfläche in einer .btn-Gruppe platzieren und die richtigen Menü-Tags hinzufügen.

Dropdown-Menü mit einer Schaltfläche

Ändern Sie einfach einige grundlegende Markierungen, um eine Schaltfläche in einen Dropdown-Menüschalter umzuwandeln.

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

Dropdown-Menü mit geteilter Schaltfläche

In ähnlicher Weise erfordert ein Dropdown-Menü mit geteilten Schaltflächen dasselbe Änderungsmarkup, jedoch mit einer separaten Schaltfläche.

<div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <div class="dropdown">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
   </div>
  </div

Sie können nur auf das kleine Symbol klicken, um das Menü anzuzeigen.

2), Größe

Die Dropdown-Menüschaltfläche funktioniert mit allen Schaltflächengrößen.

<div class="btn-group">
 <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
 Large button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
 Extra small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

Steuern Sie die Schaltflächengröße über die Stilklassen .btn-lg, .btn-sm, .btn-xs.

3), Popup-Menü

Fügen Sie .dropup zum übergeordneten Element hinzu, um das ausgelöste Dropdown-Menü über dem Element zu erstellen.

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

Untuk maklumat lanjut, sila rujuk: Tutorial pembelajaran Bootstrap

Ringkasan:

Artikel ini terutamanya memperkenalkan kandungan menu lungsur turun yang berkaitan, dan kemudian memperkenalkan gabungan butang dan menu lungsur turun Terdapat sedikit perubahan dan gayanya saya harap anda menyukainya.