Vermeiden Sie Doppelklick zum Umschalten des Bootstrap Dropdown-Menüs

Question

Ich verwende ein Bootstrap-Dropdown-Menü. Das Problem ist, dass es beim ersten Klick nie herunterfällt; Ich muss zweimal klicken, um es umzuschalten. Ich schätze, das Klickereignis bleibt irgendwo stecken, bevor es sich weiter ausbreitet ...

Gibt es eine Möglichkeit, das zu beheben?

Answer 1

Wenn jemand mit Winkel mit ui-bootstrap Modul zusammen mit normaler Bootstrap HTML Drop-Down-Definition gibt es auch zwei Klicks erforderlich.

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
    [...] 
</li> 

=> die data-toggle="dropdown" entfernen, wird das Problem beheben.

Das Öffnen des Dropdown-Menüs mit einem Klick funktioniert danach.

Referenz: https://github.com/angular-ui/bootstrap/issues/2294

Answer 2

Dies passiert, weil die Twitter-Bootstrap-Syntax für ihre Dropdown-Elemente ein href-Tag enthält. Sie müssen dazu preventDefault und stopPropagation, um dies zu verhindern. So etwas wie dies den Trick:

$('.dropdown-toggle').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    return false; 
}); 

Answer 3

von innerhalb des Quellcodes von angular.ui.bootstrap suchen und der einheimischen bootstrap.js sie für Dropdown-Listen beiden Handler haben.

Lösungsvorschlag: anpassen angular.ui.bootstrap dropdownToggle Richtlinie beschränken sich nur auf "A" zuschreibt. Also durch die Lösung dieses Problems müssen Sie Dropdown-Liste ändern beschränken "CA" in "A" Dies wird Klassenüberprüfer aus angular.ui.bootstrap, die bereits von bootstrap.js

für die verkleinerte Version von angular behandelt wurde. ui.bootstrap sucht nach dieser Zeile Direktive ("dropdownToggle", Funktion() {return {restricte: "CA", erfordern: "?^Dropdown", Link: Funktion (a, b, c, d) {

ersetzen "CA" mit "A".

Prost

Answer 4

I Ich habe festgestellt, dass ich auf einigen Seiten doppelklicken müsste und andere Seiten nur einen Klick haben.

Entfernen data-toggle="dropdown" machte die Doppelklick in Single und brach die Singles.

Ich verglich die HTML im Entwickler-Tool auf meinem Doppelklick auf Seiten der div mit Daten-Toggle sah wie folgt aus (weil die gleiche HTML serviert wird) und gefunden:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle" 
    aria-haspopup="true" aria-expanded="false"> 

Aber die einzigen Klick html sieht wie folgt aus:

<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"> 

also im Dokument bereit, benutzte ich attr-Erkennung und die Standardantwort verhindern und es machte mein Doppelklick Klick öffnet öffnet sich in:

if (!($('#notifications').attr('aria-haspopup') == undefined && 
    $('#notifications').attr('aria-expanded') == undefined)) 
{ 
    $('.dropdown-toggle').click(function (e) { return false; }); 
} 

Answer 5

Ich hatte das gleiche Problem wie Jaybro in https://stackoverflow.com/a/27278529/1673289, aber ihre Lösung hat nicht geholfen.

Der Weg für beide Fälle zu beheben war hinzuzufügen:

data-disabled="true" 

auf das Element, das das data-toggle="dropdown" Attribut hat.