Ich habe ein Twitter Bootstrap Dropdown-Menü. Wie alle Twitter Bootstrap-Benutzer wissen, wird das Dropdown-Menü beim Klicken geschlossen (sogar beim Klicken).
Um dies zu vermeiden, kann ich einfach einen Klickereignishandler in das Dropdown-Menü einfügen und einfach den berühmten hinzufügen event.stopPropagation()
.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
Dies sieht jedoch einfach aus und ist ein sehr häufiges Verhalten. Da carousel-controls
(sowie carousel indicators
) Ereignishandler an das document
Objekt delegiert werden, wird das click
Ereignis für diese Elemente ( vorherige / nächste Steuerelemente, ...) "ignoriert".
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
Das Verlassen auf Twitter Bootstrap Dropdown hide
/ hidden
Events ist aus folgenden Gründen keine Lösung:
- Das bereitgestellte Ereignisobjekt für beide Ereignishandler verweist nicht auf das angeklickte Element
- Ich habe keine Kontrolle über den Inhalt des Dropdown-Menüs, daher ist das Hinzufügen einer
flag
Klasse oder eines Attributs nicht möglich
Diese Geige ist das normale Verhalten und diese Geige ist mit event.stopPropagation()
hinzugefügt.
Aktualisieren
Vielen Dank an Roman für seine Antwort . Ich habe auch eine Antwort gefunden, die Sie unten finden können .
event propagation
gestoppt wurde.Antworten:
Das Entfernen
data-toggle="dropdown"
des Datenattributs und das Implementieren des Öffnens / Schließens der Dropdown-Liste kann eine Lösung sein.Klicken Sie zunächst auf den Link, um das Dropdown-Menü wie folgt zu öffnen / schließen:
und dann die Klicks außerhalb des Dropdowns anhören, um es wie folgt zu schließen:
Hier ist die Demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
quelle
// PREVENT INSIDE CLICK DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
e.stopPropagation()
ist die beste Lösung.Dies sollte auch helfen
quelle
'.dropdown-menu :not(.dropdown-item)'
damit das Klicken auf adropdown-item
das Popup schließt, das Klicken auf adropdown-header
jedoch nicht.Bootstrap bietet die folgende Funktion:
Daher sollte die Implementierung dieser Funktion in der Lage sein, das Schließen der Dropdown-Liste zu deaktivieren.
quelle
target
ist dieli.dropdown
, dierelatedTarget
ist diea.dropdown-toggle
. Sie können also nicht auf das angeklickte Element imhide
Ereignishandler verweisen.target.hasClass(".keepopen")
sollte seintarget.hasClass("keepopen")
. Andernfalls funktioniert der Code nicht.Die absolut beste Antwort ist, nach dem Dropdown-Menü der Klasse ein Formular-Tag einzufügen
Ihr Code ist also
quelle
<li>
Element sollte sich nicht in einem<form>
Element befinden.Ich habe auch eine Lösung gefunden.
Unter der Annahme, dass die
Twitter Bootstrap Components
zugehörigen Ereignishandler an dasdocument
Objekt delegiert sind , schleife ich die angehängten Handler und überprüfe, ob das aktuell angeklickte Element (oder eines seiner übergeordneten Elemente) von einem delegierten Ereignis betroffen ist.Hoffe, es hilft jedem, der nach einer ähnlichen Lösung sucht.
Vielen Dank für Ihre Hilfe.
quelle
Dies könnte helfen:
quelle
Dies kann unter allen Bedingungen funktionieren.
quelle
jQuery:
HTML:
Demo :
Allgemein: https://jsfiddle.net/kerryjohnson/omefq68b/1/
Ihre Demo mit dieser Lösung: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
quelle
Ich habe dieses einfache Ding ausprobiert und es hat wie ein Zauber funktioniert.
Ich habe das Dropdown-Menüelement von
<div>
auf geändert<form>
und es hat gut funktioniert.quelle
Ich habe kürzlich ein ähnliches Problem und habe verschiedene Möglichkeiten ausprobiert, um es zu lösen, indem ich das Datenattribut entfernt
data-toggle="dropdown"
undclick
beimevent.stopPropagation()
Aufrufen abgehört habe .Der zweite Weg sieht vorzuziehen. Auch Bootstrap-Entwickler verwenden diesen Weg. In der Quelldatei habe ich die Initialisierung der Dropdown-Elemente gefunden:
Also, diese Zeile:
schlägt vor, dass Sie ein
form
Element mit Klasse.dropdown
in den Container einfügen können, um das Schließen des Dropdown-Menüs zu vermeiden.quelle
Bootstrap hat dieses Problem selbst gelöst,
<form>
indem es Tags in Dropdowns unterstützt. Ihre Lösung ist leicht zu verstehen und kann hier gelesen werden: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.jsEs läuft darauf hinaus, die Weitergabe am Dokumentelement zu verhindern und dies nur für Ereignisse vom Typ
'click.bs.dropdown.data-api'
, die mit dem Selektor übereinstimmen'.dropdown .your-custom-class-for-keep-open-on-click-elements'
.Oder im Code
quelle
form
sich fragen, warum der Ansatz aus den Beispielen für Sie nicht funktioniert - ich habe Klasse verwendetdropleft
, aber er muss auchdropdown
, damit die Formularauswahl übereinstimmt.Ich habe die Antwort von @ Vartan geändert, damit sie mit Bootstrap 4.3 funktioniert. Seine Lösung funktioniert mit der neuesten Version nicht mehr, da die
target
Eigenschaft immer den Stamm der Dropdown-Liste zurückgibt, unabhängig davon,div
wo der Klick platziert wurde.Hier ist der Code:
quelle
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
return !target.closest('.dropdown-keep-open').length)
. Das heißt, das ist eine großartige Lösung! Fand dies erforderlich, um dieses Problem zu lösen.quelle
Ich habe es noch einmal aktualisiert, um so intelligent und funktional wie möglich zu sein. Es wird jetzt geschlossen, wenn Sie außerhalb des Navigationsgeräts schweben, und bleibt geöffnet, während Sie sich darin befinden. einfach perfekt.
quelle
show
wird das Dropdown-Menü jedoch nicht geschlossen, wenn Sie nach außen klicken, und wir müssen auf den Dropdown-Schalter klicken, bevor ... +1body
basiert auch nicht auf Klickereignis ^^$('body').on('click', function (e) {
Wie zum Beispiel hat Bootstrap 4 Alpha dieses Menüereignis. Warum nicht verwenden?
quelle
e.preventDefault();
blockiert Links, können Sie es überspringenSie können die Weitergabe durch Klicken auf das Dropdown-Menü beenden und die Karussellsteuerelemente mithilfe von Karussell-Javascript-Methoden manuell neu implementieren .
Hier ist die jsfiddle .
quelle
Mit Angular2 Bootstrap können Sie nonInput für die meisten Szenarien verwenden:
https://valor-software.com/ng2-bootstrap/#/dropdowns
quelle
Ich weiß, dass diese Frage speziell für jQuery gestellt wurde, aber für alle Benutzer von AngularJS, die dieses Problem haben, können Sie eine Direktive erstellen, die dies behandelt:
Fügen Sie dann einfach das Attribut
dropdown-prevent-close
zu Ihrem Element hinzu, das das Schließen des Menüs auslöst, und es sollte dies verhindern. Für mich war es einselect
Element, das das Menü automatisch schloss:quelle
<div class="dropdown-menu" ng-click="$event.stopPropagation()">
arbeitet für mich in 1.2.x[Bootstrap 4 Alpha 6] [Rails] Für Rails-Entwickler
e.stopPropagation()
führt dies zu unerwünschtem Verhaltenlink_to
beidata-method
ungleich,get
da standardmäßig alle Ihre Anforderungen als zurückgegeben werdenget
.Um dieses Problem zu beheben, schlage ich diese universelle Lösung vor
Code-Snippet anzeigen
quelle
Anstatt Javascript oder JQuery-Code zu schreiben (das Rad neu erfinden). Das obige Szenario kann mit der Option zum automatischen Schließen des Bootstraps verwaltet werden. Sie können einen der Werte zum automatischen Schließen angeben :
always - (Standard) schließt das Dropdown-Menü automatisch, wenn auf eines seiner Elemente geklickt wird.
externClick - schließt die Dropdown-Liste nur dann automatisch, wenn der Benutzer auf ein Element außerhalb der Dropdown-Liste klickt.
deaktiviert - Deaktiviert das automatische Schließen
Schauen Sie sich folgenden Plunkr an:
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
einstellen
Hoffe das hilft :)
quelle
ui-bootstrap
, was bei sehr vielen Personen, die diese Frage betrachten, wahrscheinlich nicht der Fall ist.uib-dropdown auto-close="outsideClick"
. Das Schließen des Menüs beim Klicken im Inneren ist nur ein wenig unangenehm, aber das Menü, das beim Klicken im Freien nicht geschlossen wird, ist ziemlich ärgerlich.Ich weiß, dass es bereits eine vorherige Antwort gibt, die die Verwendung eines Formulars vorschlägt, aber das bereitgestellte Markup ist nicht korrekt / ideal. Hier ist die einfachste Lösung, es wird überhaupt kein Javascript benötigt und es bricht Ihre Dropdown-Liste nicht. Funktioniert mit Bootstrap 4.
<form class="dropdown-item"> <!-- Your elements go here --> </form>
quelle
Das hat mir geholfen,
Ihr Dropdown-Menüelement muss folgendermaßen sein (notieren Sie sich die Klassen
dropdown-menu
undkeepopen
.Der obige Code verhindert, dass insgesamt
<body>
auf das spezifische Element mit der Klasse verzichtet wirddropdown-menu
.Hoffe das hilft jemandem.
Vielen Dank.
quelle
Die einfachste Arbeitslösung für mich ist:
keep-open
Klassen zu Elementen, die kein Dropdown-Schließen verursachen sollenquelle
Ich habe festgestellt, dass keine der Lösungen funktioniert, da ich die Standard-Bootstrap-Navigation verwenden möchte. Hier ist meine Lösung für dieses Problem:
quelle
.dropdown
Setzen Sie die.keep-open
Klasse im Inhalt auf ein beliebiges Etikett wie folgt:In den vorherigen Fällen wurden die Ereignisse im Zusammenhang mit den Containerobjekten vermieden. Jetzt erbt der Container die Klasse, die geöffnet und überprüft wird, bevor sie geschlossen wird.
quelle
Ich habe es damit gemacht:
quelle
quelle
Um das Dropdown-Menü nur zu schließen, wenn ein Klickereignis außerhalb des Bootstrap-Dropdowns ausgelöst wurde, hat dies für mich funktioniert:
JS-Datei:
HTML-Datei:
quelle
Möglicherweise treten Probleme auf, wenn Sie die Methode return false oder stopPropagation () verwenden, da Ihre Ereignisse unterbrochen werden. Versuchen Sie diesen Code, es funktioniert gut:
In HTML:
Wenn Sie den Dropdrown schließen möchten:
quelle
In Bootstrap 4 können Sie dies auch tun:
Wo
#dd-link
ist das Ankerelement oder die Schaltfläche, die diedata-toggle="drowndown"
Eigenschaft hat ?quelle