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 füge einfach das onclick-Ereignis wie unten angegeben hinzu, um das Dropdown-Menü nicht zu schließen.

Answer 2

Dies könnte helfen:

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})

Answer 3

Ich habe auch eine Lösung gefunden.

Unter der Annahme, dass die Ereignishandler der Twitter Bootstrap-Komponenten an das Dokument-Objekt übertragen werden, durchlaufe ich die angehängten Handler und prüfe, ob das aktuell angeklickte Element (oder eines seiner Elternteile) von einem übertragenen Ereignis betroffen ist.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            // Überprüfen, ob das angeklickte Element mit dem Ereignis-Selektor übereinstimmt
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Überprüfen, ob eines der Elternelemente des angeklickten Elements mit dem übertragenen Ereignis-Selektor übereinstimmt (Propagation nachahmen)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); // Immer die Propagation stoppen
});

Hoffentlich hilft es jemandem, der nach einer ähnlichen Lösung sucht.

Vielen Dank für eure Hilfe.

Answer 4

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

Dies könnte unter allen Bedingungen funktionieren.

Answer 5

Ich habe diese einfache Sache ausprobiert und es hat wunderbar funktioniert.

Ich habe das dropdown-menu Element von

zu

geändert und es hat gut funktioniert.

   Klicken Sie, um das Dropdown-Menü zu öffnen

   Klicken Sie, um das Dropdown-Menü zu öffnen

      Listenpunkt 1

         LI 2

        Listenpunkt 3