ブートストラップはドロップダウン メニューのeffect_javascriptスキルを実装します

ドロップダウン メニュー リンクのリストを表示するための切り替え可能なコンテキスト メニュー。

1. ケース

ドロップダウン メニュー トリガーとドロップダウン メニューを .dropdown で囲み、メニューを構成する HTML コードを追加します。

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

上記のコードから、見慣れないスタイル クラスや属性が多数含まれている可能性があることがわかります。

右側のドロップダウン ボタンと小さなアイコン キャレット もちろん、この小さなアイコンとボタンのテキストは同じレベルにあります。

まず、ボタン ボタンにドロップダウン トグルがあり、この属性に基づいてドロップダウン リストがポップアップすることを確認します。

ul タグの直後にあるドロップダウン メニューは、上のボタン ボタンのスタイル クラス ドロップダウン トグルと組み合わせて使用​​する必要があり、上のボタン ボタンは aria-labelledby によってバインドされています。

4 番目の li タグにはディバイダがあります。これは実際には行を分割するためのスタイル クラスです。

これはおそらく私が理解していることですが、私の理解は決して適切ではありません。

2. 配置オプション

テキストを右揃えにするには、ドロップダウン メニュー .dropdown-menu に .text-right を追加します。

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

上記のコードの ul タグに text-right スタイル クラスを追加するだけです。

3. タイトル

アクションのグループは、タイトルを追加することでドロップダウン メニューで識別できます。

 <h1 id="下拉菜单">下拉菜单</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>

主に追加されたのは

Dropdown header

中に .dropdown-header スタイル クラスがあります。

4. 無効なメニュー項目

ドロップダウン メニューの

に .disabled 無効リンクを追加します。

引き続き上記のコードを変更し、「Something else here」行のコードを置き換えます

コードをコピー コードは次のとおりです。

その他の内容はこちら