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

Question

ブートストラップ ドロップダウンが閉じられたとき、または切り替えられたときに発生する、関連付けることができるイベントはありますか?

Answer 1

Twitterのブートストラップ公式ページから：

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

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

更新 (2016 年 4 月 13 日)

これらのイベントは でも同じように機能しBootstrap 4ます。ブートストラップ v4 ドキュメント.

Answer 2

This is how Bootstrap v2.3.2 closes the menu no matter what you click on:

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

If you're using v2.x, this could be used to know when a menu will be closed. However, keep in mind that this is triggered on every click. If you only need to execute something when a menu is really closed (which is probably all the time), you'll need to track when one is opened in the first place. The accepted answer is probably a better solution in that regard.

In Boostrap v3.0.0, however, the drop menu supports four separate events:

show.bs.dropdown: This event fires immediately when the show instance method is called.

shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).

hide.bs.dropdown This event is fired immediately when the hide instance method has been called.

hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

From Bootstrap's documentation.

Answer 3

最終的に、私が見つけた唯一の信頼できる方法は、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();
        }
    });

});

Answer 4

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

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

切り替えには、click()イベントのみを使用します。

これがjsfiddleです。

Answer 5

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

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