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

In .dropdown Inhalt fügen Sie die .keep-open Klasse auf jedes Label hinzu, wie folgt:

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

In den vorherigen Fällen wurden die Ereignisse, die mit den Containerobjekten zusammenhängen, vermieden. Jetzt erbt der Container die Klasse keep-open und überprüft, bevor er geschlossen wird.

Answer 2

Statt dem Schreiben von JavaScript- oder jQuery-Code (das Rad neu erfinden). Das obige Szenario kann mit der Bootstrap-Auto-Close-Option verwaltet werden. Sie können einen der folgenden Werte für auto-close angeben:

1. always - (Standard) schließt das Dropdown automatisch, wenn eines seiner Elemente angeklickt wird.

2. outsideClick - schließt das Dropdown automatisch, nur wenn der Benutzer auf ein Element außerhalb des Dropdowns klickt.

3. disabled - deaktiviert das automatische Schließen

Schauen Sie sich den folgenden Plunkr an:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

Setzen

uib-dropdown auto-close="disabled" 

Hoffentlich hilft dies :)

Answer 3

Ich habe festgestellt, dass keines der Lösungen mit der Standard-Bootstrap-Navigation so funktioniert hat, wie ich es gerne hätte. Hier ist meine Lösung für dieses Problem:

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });

Answer 4

Sie könnten Probleme haben, wenn Sie die Methode return false oder stopPropagation() verwenden, da Ihre Events unterbrochen werden. Versuchen Sie diesen Code, er funktioniert gut:

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

In HTML:

        Option 1
        Option 2
        Schließen

Wenn Sie das Dropdown-Menü schließen möchten:

`$('#search-menu').closeDropdown();`

Answer 5

Zum Schließen des Dropdowns nur, wenn außerhalb des Bootstrap-Dropdowns ein Klickereignis ausgelöst wurde, hat bei mir Folgendes funktioniert:

JS-Datei:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

HTML-Datei:

                    DROPDOWN ÖFFNEN

                        WAS AUCH IMMER DU HIER MÖCHTEST...