Bootstrapドロップダウンをクリックしても閉じないようにする方法

Bootstrapドロップダウンがクリックで閉じてしまう問題

Bootstrapのドロップダウンは、デフォルトでは開いた状態でドロップダウン以外の場所をクリックすると、自動的に閉じる仕様になっています。この挙動は通常便利ですが、メニュー内でチェックボックスやボタンなどを操作したい場合には、閉じずに開いたまま維持したいケースもあります。

hide.bs.dropdownイベントで閉じる動作を防ぐ

ドロップダウンをクリック後も開いたままにしたい場合は、以下のコードを使用します。hide.bs.dropdownイベントを捕捉し、falseを返すことで、ドロップダウンが閉じる処理そのものをキャンセルできます。

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

clickイベントとstopPropagation()を使う方法

もう一つの選択肢として、クリックイベント自体をハンドリングする方法があります。次のコードでは、event.stopPropagation()メソッドを使用しています。このメソッドは、イベントが親要素へ伝播（バブリング）するのを阻止する働きがあり、結果として親要素に登録されたイベントハンドラが実行されなくなります。

$('#myDropdown .dropdown-menu').on({
    "click": function(e) {
        e.stopPropagation();
    }
});

どちらの方法を採用するかは要件によって異なります。ドロップダウンの自動的に閉じる挙動を完全に無効化したい場合は前者のhide.bs.dropdown方式が、メニュー内部のクリックだけ伝播を防ぎたい場合は後者のstopPropagation()方式が適しています。