twitter-bootstrap
ブートストラップドロップダウン

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

パラメーター

メソッド	例
Javascript経由で呼び出す	`$('.dropdown-toggle').dropdown();`
ドロップダウンを切り替えます。	`$('.dropdown-toggle').dropdown('toggle')`
イベントタイプ	説明
show.bs.dropdown	このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。
示された.bs.dropdown	このイベントは、ユーザーにドロップダウンが表示されたときに発生します（CSSトランジションが完了するまで待機します）。
hide.bs.dropdown	このイベントは、hideインスタンスメソッドが呼び出されたときに直ちに起動されます。
hidden.bs.dropdown	このイベントは、ドロップダウンがユーザーから隠されたときに発生します（CSSトランジションが完了するのを待ちます）。
イベントハンドラの例	`$(element).on('show.bs.dropdown', function () { // do something… })`

備考

ドロップダウンをJavascript $('.dropdown-toggle').dropdown()呼び出すと、data-apiすなわちdata-toggle="dropdown"依然として必要です。続きを読む

使い方

ドロップダウンメニューの親要素で.dropdownクラスを使用します。

.dropdown-menuクラスを要素に追加して、ドロップダウンメニュープラグインを初期化します。

ボタンまたはハイパーリンクのクラス.dropdown-toggleとdata-toggle="dropdown" .dropdown-toggle data-toggle="dropdown"属性を使用して、プラグインを呼び出します。

基本的な例

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Option One</a></li>
    <li><a href="#">Option two</a></li>
    <li><a href="#">More Options</a></li>
  </ul>
</div>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow