Twitter ブートストラップのドロップダウン メニューが内部クリックで閉じないようにするにはどうすればよいですか?

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

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

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

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

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

提案された解決策

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

<code class="js">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

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

以上がTwitter ブートストラップのドロップダウン メニューが内部クリックで閉じないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。