46

ボタンのドロップダウン (すべてではなく 1 つだけ) があり、その中にいくつかの入力フィールドがあり、クリックするとすぐにドロップダウンが非表示になることなく内部に入力できるフィールドが必要です (ただし、その外側をクリックします）。

jsfiddle を作成しました: http://jsfiddle.net/denislexic/8afrw/2/

コードは次のとおりです。これは基本的なものです。

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

したがって、基本的には、ドロップダウンをクリックしても閉じないようにします（ただし、アクションボタンをクリックするか、ドロップダウンの外側で閉じます）。これまでの私の最善の推測は、それにクラスを追加してJSを実行しようとすることでしたが、それを理解できませんでした.

助けてくれてありがとう。

4

7 に答える 7

112

問題は、他の場所をクリックすると、boostrapドロップダウンjQueryプラグインがドロップメニューを閉じることです。ドロップダウンメニュー要素のクリックイベントをキャプチャし、body要素のクリックイベントリスナーに到達しないようにすることで、この動作を無効にできます。

追加するだけ

$('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​

jsfiddleはここにあります

于 2012-07-23T17:41:12.480 に答える
39

この質問は Angular 自体に対するものではないことはわかっていますが、Angular を使用している人なら誰でも、HTML からイベントを渡し、$event 経由で伝播を停止できます。

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>
于 2014-02-07T18:38:04.277 に答える
1

多くの手法を試した後、使用するのに最適な手法であることがわかりました。これは、単純でさえも欠点を引き起こしません。

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

これにより、ドロップダウン内の内部要素に対してライブ バインディングを実行することもできます。

于 2014-10-23T13:57:35.963 に答える
0

また、ボタン要素をクリックしない限り、クリックを防止します

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
于 2014-12-12T00:30:42.823 に答える