内部クリック時にドロップダウン メニューが閉じるのを防ぐ

内部要素がクリックされたときに Twitter Bootstrap ドロップダウン メニューが閉じるのを回避するソリューション委任されたクリック イベント処理が必要です。詳細な説明と提案された解決策は次のとおりです:

デフォルトでは、Twitter Bootstrap ドロップダウン メニューは、メニュー自体内であってもクリックすると閉じます。この動作を解決するための一般的なアプローチの 1 つは、ドロップダウン メニューにクリック イベント ハンドラーをアタッチし、event.stopPropagation() を呼び出してイベントの伝播を防ぐことです。

ただし、カルーセル コントロールなどのコンポーネントを利用するセットアップの場合、委任されたイベントTwitter Bootstrap の処理メカニズムが意図した動作を妨げる可能性があります。このような場合、これらのコントロールをクリックしても、イベントが委任されたイベント ハンドラーに到達しないため、予期したアクションがトリガーされない可能性があります。

ドロップダウンの非表示/非表示イベントに依存することは、これらのイベントには重要な情報が不足しているため、実行可能な代替策ではありません。ドロップダウン コンテンツの制御。

提案された解決策

効果的な解決策は、ドロップダウン メニューを収容するコンテナ要素でイベント委任を使用することです。例を次に示します。

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

この例では、指定されたコンテナー内の要素をクリックすると、イベントがそれぞれの委任されたハンドラーに伝播されます。ただし、特にドロップダウン メニューをクリックするとインターセプトされ、event.stopPropagation() によってドロップダウン メニューの閉じ動作が防止されます。