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

Ich weiß, dass diese Frage speziell für jQuery war, aber für alle, die AngularJS verwenden und dieses Problem haben, können Sie eine Direktive erstellen, die dies behandelt:

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //verhindert das Standardverhalten des Schließens des Dropdown-Menüs
          });
        }
    };
});

Fügen Sie dann einfach das Attribut dropdown-prevent-close zu Ihrem Element hinzu, das das Menü zum Schließen auslöst, und es sollte verhindern. Bei mir handelte es sich um ein select-Element, das das Menü automatisch geschlossen hat:

    Wählen Sie mich aus

Answer 2

Ich habe es damit gemacht:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});

Answer 3

Die einfachste Lösung, die für mich funktioniert, lautet:

• Fügen Sie der Elemente, die den Dropdown nicht schließen sollen, die Klasse keep-open hinzu

• und dieser Code erledigt den Rest:

  $('.dropdown').on('click', function(e) { var target = $(e.target); var dropdown = target.closest('.dropdown'); return !dropdown.hasClass('open') || !target.hasClass('keep-open'); });

Answer 4

Du kannst den unten stehenden Code durchgehen, um das zu lösen.

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

        Dropdown Beispiel

          HTML
          CSS
          JavaScript

Answer 5

Bootstrap 4

$('.dropdown-menu[data-handledropdownclose="true"]').on("click.bs.dropdown", function (e) {
    if ($(this).parent().hasClass("show")) {
        var target = $(e.target);

        if (!(target.hasClass("CloseDropDown") || target.parents(".CloseDropDown").length)) {
            e.stopPropagation();
        }
    }
});

             Hallo Welt

                Test Aktion

                                Test 2

                                 Test 1 
                                 Test 2 

                Abmelden