ドロップダウン dropdown.js
リンクのリストの表示/非表示を切り替えるドロップダウン用のJavaScript。
ドロップダウン・ボタン、ナビゲーション（タブ・メニュー、カプセル・メニュー）、ナビゲーション・バーにおいて使う。
サンプル
使い方
button要素によるドロップダウン・ボタン
a要素によるドロップダウン・ボタン
タブ・メニューにおけるドロップダウン
カプセル・メニューにおけるドロップダウン
ナビゲーション・バーにおけるドロップダウン
ドロップダウンを開いた状態でページを読み込む方法
イベント
使い方
ポイントは３つ。
- ドロップダウンを覆う要素（
div要素やul要素など）のclass属性に、dropdownを指定する。 - リンクのリストの表示/非表示を切り替えを制御する要素（
button要素やa要素など）のdata-toggle属性に、dropdownを指定する。 - リンクのリストの要素（
ul要素）のclass属性に、dropdown-menuを指定する。
ソースコード
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> ドロップダウン <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">リンクのリスト１</a></li> <li role="presentation"><a href="#">リンクのリスト２</a></li> <li role="presentation"><a href="#">リンクのリスト３</a></li> </ul> </div>