Stoppt nur einen Dropdown-Schalter vom Schließen auf Klick

Question

Ich habe eine Schaltfläche Dropdown (nur eine, nicht alle von ihnen), und innerhalb davon möchte ich mehrere Eingabefelder haben, in denen Leute Zeug ohne das Dropdown verstecken als eingeben können sobald Sie darauf klicken (aber es schließt, wenn Sie außerhalb klicken).

habe ich eine jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

Und hier ist der Code, es ist basic:

<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>​ 

Also im Grunde, ich will es nicht auf Klick auf den Dropdown schließen (aber in der Nähe auf Klick die Aktionstaste oder außerhalb des Dropdown-Menüs). Meine beste Vermutung war bisher, eine Klasse hinzuzufügen und zu versuchen, etwas JS zu machen, aber ich konnte es nicht herausfinden.

Danke für jede Hilfe.

Answer 1

Das Problem ist, dass das Bountrap-Dropdown-jQuery-Plugin das Drop-down-Menü schließt, wenn Sie irgendwo anders klicken. Sie können dieses Verhalten deaktivieren, indem Sie die Klickereignisse in Ihrem Dropdown-Menüelement erfassen und verhindern, dass die Klickereignis-Listener im body-Element erreicht werden.

Fügen Sie einfach

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

jsfiddle here

Answer 2

gefunden werden kann Ich weiß, diese Frage nicht für Angular per se ist, sondern für jeden Winkel verwenden Sie das Ereignis aus der HTML passieren kann und die Ausbreitung stoppen über $ event:

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

Answer 3

Nachdem viele Techniken versuchen, fand ich, dass die beste zu verwenden, die bewirkt, dass keine Nachteile, die auch einfach:

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

Sie können auch einige Live-Bindung für innere Elemente innerhalb von Dropdowns tun.

Answer 4

auch verhindern, klicken Sie auf, es sei denn auf eine Schaltfläche klickt Element

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

Answer 5

Eigentlich, wenn Sie in Angularjs wäre, wäre es eleganter sein, eine Richtlinie für sie zu machen:

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

Und Fügen Sie dann im Dropdown-Menü die folgende Direktive hinzu:

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

Besonders wenn Sie die Propagierung für multipl stoppen wollen e Mausereignisse:

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

element.mousedown(... 
element.mouseup(... 
... 

Answer 6

Eine weitere schnelle Lösung, fügen Sie einfach onclick Attributklasse div mit dropdown-menu:

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

Answer 7

ich dieses Problem hatte, aber in einer Komponente reagieren - die reagieren Komponente in einem Bootstrap-Drop-Down war Menü mit einem Formular. Jedes Mal, wenn auf ein Element im Dropdown-Menü geklickt wurde, wurde es geschlossen, was zu Problemen bei der Eingabe von Elementen im Formular führte.

Die üblichen e.preventDefault() und e.stopPropagation() würden in der reaktiven App nicht funktionieren, da das jquery-Ereignis sofort ausgelöst wird und darauf zu reagieren versucht.

Der folgende Code erlaubte mir, mein Problem zu beheben.

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

oder in ES6 Format

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

Hope this Nutzungs jemand mit den anderen Antworten zu kämpfen sein kann, wenn sie versuchen es in zu verwenden, reagieren.