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

Dies sollte auch helfen

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

Answer 2

Das Entfernen des Datenattributs data-toggle="dropdown" und die Implementierung des Öffnens/Schließens des Dropdown-Menüs können eine Lösung sein.

Zuerst durch das Behandeln des Klicks auf den Link zum Öffnen/Schließen des Dropdown-Menüs wie folgt :

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

und dann das Hören auf Klicks außerhalb des Dropdown-Menüs, um es zu schließen, wie folgt :

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

Hier ist die Demo : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

Answer 3

Im neuen Bootstrap 5 ist die Lösung trivial einfach.

Zitat von der Dokumentationsseite:

Standardmäßig wird das Dropdown-Menü geschlossen, wenn man innerhalb oder außerhalb des Dropdown-Menüs klickt. Sie können die autoClose-Option verwenden, um dieses Verhalten des Dropdowns zu ändern.

Zusätzlich zum Standardverhalten stehen hier 3 Optionen zur Verfügung:

• Außerhalb klickbar: data-bs-auto-close="outside"
• Innen klickbar: data-bs-auto-close="inside"
• Manuelles Schließen: data-bs-auto-close="false"

Zum Beispiel:

    Klickbar innen

    Menüpunkt
    Menüpunkt
    Menüpunkt

Weitere Informationen: https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior

Answer 4

Die absolut beste Antwort ist, ein Formular-Tag nach der Klasse dropdown-menu zu platzieren

also lautet dein Code

      bla bla bla

Answer 5

Bootstrap bietet die folgende Funktion:

                 | Dieses Ereignis wird sofort ausgelöst, wenn die Methode zum Ausblenden 
hide.bs.dropdown | aufgerufen wurde. Das umschaltende Anker-Element ist als die relatedTarget-Eigenschaft
                 | des Ereignisses verfügbar.

Daher sollte die Implementierung dieser Funktion das Dropdown daran hindern, geschlossen zu werden.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.clickEvent.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // Das Zurückgeben von false sollte verhindern, dass das Dropdown geschlossen wird.
    }else{
        return true;
    }
});