web-dev-qa-db-ja.com

Twitter Bootstrap：ドロップダウンが閉じられたときにjs関数を呼び出す

bootstrapドロップダウンが閉じられるかトグルされるときに起動されるイベントに結び付けることができますか？

javascripttwitter-bootstrapdom-events
47
Nolan

最後に、私が見つけた唯一の信頼できる方法は、jqueryのデータAPIを使用してドロップダウンの状態を保存し、ボタンとドキュメントにクリックイベントを追加することでした。

$(document).ready(function() {

    $('#dropdown').data('open', false);

    $('#dropdown-button').click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        } else
            $('#dropdown').data('open', true);
    });

    $(document).click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        }
    });

});
22
Nolan

から Twitter bootstrap=公式ページ ：

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

hide.bs.dropdownは ここで説明する4つのイベントの1つ です。

更新（13-Apr-16）

これらのイベントは、Bootstrap 4でも同じように機能します。 Bootstrap v4 Documentation 。

37
Rash

これは、Bootstrap v2.3.2がクリックに関係なくメニューを閉じる方法です：

$('html').on('click.dropdown.data-api', function () {
    $el.parent().removeClass('open')
});

V2.xを使用している場合、これを使用して、メニューがいつ閉じられるかを知ることができます。ただし、これはクリックごとにトリガーされることに注意してください。メニューが実際に閉じられているときにのみ（おそらく常に）実行する必要がある場合は、最初にメニューが開かれたときに追跡する必要があります。受け入れられた答えはおそらくその点でより良い解決策です。

ただし、Boostrap v3.0.0では、ドロップメニューは4つの個別のイベントをサポートしています。

show.bs.dropdown：このイベントは、show instanceメソッドが呼び出されるとすぐに起動します。

shown.bs.dropdownこのイベントは、ドロップダウンがユーザーに見えるようになると発生します（CSSの移行が完了するまで待機します）。

hide.bs.dropdownこのイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。

hidden.bs.dropdownこのイベントは、ドロップダウンがユーザーから非表示になったときに発生します（CSSの移行が完了するまで待機します）。

Bootstrapのドキュメント から。

26
Mathachew

文書化されたイベントはありませんが、_.open_の_.dropdown_クラスとjQuery click()イベントを使用できます。

_$('#the-dropdown').click(function () {
    if($(this).hasClass('open')) {
        alert('it works');
    }
});
_

トグルするには、click()イベントのみを使用します。

ここ はjsfiddleです。

7
albertedevigo

私は次のように私のものをしました。

HTML：

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

スクリプト

$('#theme li').click(function () {
   switch_style($(this).text());
        });

よく働く

2
mark1234

ノーラン、「これは機能しませんでした」という意味は、ユーザーがページ上の他の場所をクリックし、ボタン/ドロップダウンを適切に閉じていない場合です。これらのクリック（ドキュメントの任意の場所）を次の方法で監視できます。

$(document).click(function() {
    //check which element was clicked on
});
2
Sebastian