web-dev-qa-db-ja.com

クリックで閉じるのを1回だけドロップダウンで切り替えます

ボタンのドロップダウン（すべてではなく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を実行することでしたが、それを理解できませんでした。

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

javascriptdrop-down-menutwitter-bootstrap
46
denislexic

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

追加するだけ

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

jsfiddleを見つけることができます here

111
CraigTeegarden

私はこの質問がAngularそれ自体ではないが、Angularを使用している人はHTMLからイベントを渡し、$ eventを介して伝播を停止することができます。

<div ng-click="$event.stopPropagation();">
    <span>Content example</span>
</div>
39
parliament

実際、Angular.jsを使用している場合は、ディレクティブを作成するとよりエレガントになります。

app.directive('stopClickPropagation', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.click(function(e) {
                e.stopPropagation();
            });
        }
    };
});

次に、ドロップダウンメニューでディレクティブを追加します。

<div class="dropdown-menu" stop-click-propagation> 
    my dropdown content...
<div>

特に、複数のマウスイベントの伝播を停止する場合：

...
element.click(function(e) {
    e.stopPropagation();
});

element.mousedown(...
element.mouseup(...
...
5
Nahn

別の簡単な解決策は、クラスdropdown-menuを持つdivにonclick属性を追加するだけです：

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>
5
Hassan Talha

多くのテクニックを試した後、使用するのに最適なものであることがわかりました。

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

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

1
Julian Xhokaxhiu

私はこの問題を抱えていましたが、反応するコンポーネントにあります-反応するコンポーネントはbootstrap=ドロップダウンメニューのフォームにありました。ドロップダウン内の要素がクリックされるたびに閉じて、フォーム。

通常のe.preventDefault()とe.stopPropagation()は、jqueryイベントがすぐに起動され、この後に介入しようとするため、reactアプリでは機能しません。

以下のコードにより、問題を修正することができました。

stopPropagation: function(e){
    e.nativeEvent.stopImmediatePropagation();
}

またはES6形式

stopPropagation(e){
    e.nativeEvent.stopImmediatePropagation();
}

これが反応で使用しようとするとき、他の答えに苦労している人に役立つことを願っています。

0
Sprose

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

$('.dropdown-menu').click(function(e) {
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation();
});
0
Elise Chant