dropdown.js

• 使用例
• 使用方法
• オプション
• メソッド
• イベント

使用例

ナビゲーションバー(navbar)、タブ(tabs)、ピル(pills)を含むほとんどの何かしらのものに対して、 このシンプルなプラグインを使用してドロップダウンメニューを追加しています。

ナビゲーションバー(navbar)で使用

ピル(pills)で使用

使用方法

ドロップダウンのプラグインはdata属性またはJavaScriptを通じて、親リストの項目上の.openクラスを切り替えることで、 隠されているコンテンツ(ドロップダウンメニュー)の表示/非表示を切り替えます。

モバイルデバイスでは、本来のiOSサポートで必須とされているメニューの外側のタップによってドロップダウンメニューが閉じられるように、 ドロップダウンを開くとタップ領域として.dropdown-backdropが追加されます。 これは、モバイル上でドロップダウンメニューから異なるドロップダウンメニューを開いて切り替えを行うのに、 余計なタップが必要になることを意味します。

注意: data-toggle="dropdown"属性は、アプリケーション層でドロップダウンメニューを閉じるのに利用されるため、 常にこれを使用することをお奨めします。

data属性を使用

data-toggle="dropdown"をリンクまたはボタンに追加します。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

リンクボタンで使用する際にURLをそのまま保持するには、href="#"の代わりに、data-target属性を使用してください。

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScriptを使用

JavaScriptを通じてドロップダウンを呼び出します。

$('.dropdown-toggle').dropdown()

依然としてdata-toggle="dropdown"は必要
ドロップダウンを、JavaScriptを使用して呼び出すにしても、data-apiを使用して呼び出すにしても、 どちらにしてもドロップダウンを切り替える要素上でdata-toggle="dropdown"が提供されていることが常に必要とされます。

オプション

無し

メソッド

$().dropdown('toggle')

ナビゲーションバー(navbar)、またはタブ化されたナビゲーションのドロップダウンメニューの切り替えを行います。

イベント

全てのドロップダウンのイベントは、.dropdown-menuの親要素上で発火されます。

全てのドロップダウンのイベントはrelatedTargetプロパティを持ち、 この値は切り替えのアンカー要素になります。

イベントの型	説明
show.bs.dropdown	このイベントは、showのインスタンスメソッドが呼ばれた際に即座に発火します。
shown.bs.dropdown	このイベントは、モーダルがユーザーに対して可視化された際に発火されます。(CSSトランジションの完了を待ちます)
hide.bs.dropdown	このイベントは、hideのインスタンスメソッドが呼ばれた際に即座に発火します。
hidden.bs.dropdown	このイベントは、ドロップダウンがユーザーに対しての非表示への移行が完了した際に発火されます。(CSSトランジションの完了を待ちます)

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

 Back to top