Verhindere das Schließen des Dropdown-Menüs beim Klicken im Inneren

Question

Ich habe ein Twitter Bootstrap Dropdown-Menü. Wie alle Twitter Bootstrap-Benutzer wissen, schließt sich das Dropdown-Menü beim Klicken (auch wenn man darin klickt).

Um dies zu vermeiden, kann ich einfach einen Klick-Ereignishandler am Dropdown-Menü anhängen und einfach das berühmte event.stopPropagation() hinzufügen.

       Menüpunkt 1

Dies sieht einfach aus und ist ein sehr verbreitetes Verhalten, jedoch werden carousel-controls (sowie carousel indicators) Ereignishandler an das document-Objekt weitergeleitet, so dass das click-Ereignis auf diesen Elementen (z.B. prev/next controls, ...) "ignoriert" wird.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // Das Ereignis wird nicht nach oben zum document-KNOTEN propagiert und 
    // daher werden weitergeleitete Ereignisse nicht ausgelöst
    event.stopPropagation();
});

Sich auf die Twitter Bootstrap Dropdown hide/hidden-Ereignisse zu verlassen, ist keine Lösung aus folgenden Gründen:

• Das bereitgestellte Ereignisobjekt für beide Ereignishandler enthält keinen Verweis auf das angeklickte Element
• Ich habe keine Kontrolle über den Inhalt des Dropdown-Menüs, sodass das Hinzufügen einer flag-Klasse oder eines Attributes nicht möglich ist

Dieses Fiddle zeigt das normale Verhalten und dieses Fiddle zeigt das Verhalten mit event.stopPropagation() hinzugefügt.

Aktualisierung

Danke an Roman für seine Antwort. Ich habe auch eine Antwort gefunden, die Sie unten finden können.

Answer 1

jQuery:

  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });

HTML:

     Dropdown-Beispiel

    HTML
    CSS
    JavaScript

Demo:

Allgemeine Demo: https://jsfiddle.net/kerryjohnson/omefq68b/1/

Ihre Demo mit dieser Lösung: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

Answer 2

Ich habe die Antwort von @Vartan modifiziert, um sie mit Bootstrap 4.3 zum Laufen zu bringen. Seine Lösung funktioniert nicht mehr mit der neuesten Version, da die target-Eigenschaft immer das Dropdown-Root-div zurückgibt, egal wo der Klick platziert wurde.

Hier ist der Code:

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // Wenn auf die Schaltfläche (oder ein anderes Auslöser) geklickt wird, gibt es keine `clickEvent`-Eigenschaft im `e`-Objekt. 
    // Was wir normalerweise in solchen Situationen wollen, ist das Dropdown auszublenden, also lassen wir es ausblenden. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});

    Dropdown-Schaltfläche

    Aktion
    Eine andere Aktion
    Etwas anderes hier

Answer 3

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

Answer 4

Bootstrap 5

Wenn jemand über Google hierher kommt und eine Bootstrap 5-Version möchte, wie ich es war, wird sie durch Hinzufügen von data-bs-auto-close="outside" eingebaut. Beachten Sie, dass die Option autoClose heißt, aber beim Übergeben als Datenattribut wird das Camelcasing entfernt und durch einen Bindestrich getrennt.

Ich habe ein Collapse-Widget in einem Dropdown und das Hinzufügen von data-bs-auto-close="outside" zum Elternelement data-bs-toggle="dropdown" Trigger hält das Dropdown offen, während der Collapse umgeschaltet wird.

Siehe offizielle Bootstrap-Dokumentation: https://getbootstrap.com/docs/5.1/components/dropdowns/#options Und dieses Codepen für Beispielcode (nicht mein Pen): https://codepen.io/SitePoint/pen/BaReWGe

Answer 5

Wie zum Beispiel bei Bootstrap 4 Alpha gibt es dieses Menüevent. Warum nicht nutzen?

// VERHINDERN INNERHALB DES MEGA-DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});