ブートストラップドロップダウンメニュー（ドロップダウン）ウィジェット

ドロップダウンメニューブートストラップこの章では、ドロップダウンメニューを説明しますが、相互作用の一部に関連していない、この章では、詳細にドロップダウンメニューの相互作用を説明します。 プルダウンメニュー（ドロップダウン）プラグイン、あなたは（そのようなナビゲーションバー、タブ、カプセル、ナビゲーションメニュー、ボタンなど）のコンポーネントのいずれかにあるドロップダウンメニューを追加することができますを使用してください。

あなたは、個々のプラグイン機能を参照したい場合は、dropdown.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。

使用法

あなたは非表示のドロップダウンメニュー（ドロップダウン）プラグインを切り替えることができます。

• データを介して属性：次のように、切り替えるためにデータトグル= "ドロップダウン"ドロップダウンメニューを追加するためのリンクやボタンを：

  <DIVクラス= "]プルダウン">
    <a data-toggle="dropdown" href="#">ドロップダウンメニュー（ドロップダウン）トリガします</a>
    <ULクラス= "ドロップダウン・メニューから「役割="メニュー "アリア-labelledbyの=" dLabel ">
      ...
    </ UL>
  </ DIV>
  

  あなたは（ブラウザではJavaScriptが有効になっていないときに便利です）、無傷のリンクを維持する必要がある場合は、代わりのhref = "＃"のデータ・ターゲット属性を使用してください：

  <DIVクラス= "]プルダウン">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
      プルダウンメニュー（ドロップダウン）<スパンクラス= "カレット"> </ span>の
    こちら</a>
  
  
    <ULクラス= "ドロップダウン・メニューから「役割="メニュー "アリア-labelledbyの=" dLabel ">
      ...
    </ UL>
  </ DIV>
  

• JavaScriptので：切り替えるには、ドロップダウンメニューを呼び出すことによって、JavaScriptは、以下の方法を使用してください：

  $（ '。ドロップダウン・トグル'）。ドロップダウン（）
  

例

ナビゲーションバーで

次の例では、ナビゲーションバーのドロップダウンメニューの使用方法を示しています。

結果は以下の通りであります：

タブ内で

次の例では、ドロップダウンメニューのタブの使用方法を示しています。

結果は以下の通りであります：

オプション

オプションはありません。

ウェイ

切り替えるためのドロップダウンメニュー、ドロップダウンメニューを表示または非表示にする簡単な方法があります。

$（）。ドロップダウン（ 'トグル'）

例

次の例では、プルダウンメニュー（ドロップダウン）プラグインの方法を示しています。

結果は以下の通りであります：