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

• Demo: http://jsfiddle.net/4y8tLgcp/

$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
    var $a  = $(e.target), is_a = $a.is('.is_a');
    if($a.hasClass('dropdown-toggle')){   
        $('ul.dropdown-menu', this).toggle(!is_a);
        $a.toggleClass('is_a', !is_a);
    }
}).on('mouseleave', function(){
    $('ul.dropdown-menu',this).hide();
    $('.is_a', this).removeClass('is_a');
});

Ich habe es noch einmal aktualisiert, um so intelligent und funktional wie möglich zu sein. Es schließt jetzt, wenn Sie außerhalb der Nav schweben, bleibt aber geöffnet, solange Sie sich darin befinden. Einfach perfekt.

Answer 2

Ich weiß, es gibt bereits eine vorherige Antwort, die vorschlägt, ein Formular zu verwenden, aber das bereitgestellte Markup ist nicht korrekt/ideal. Hier ist die einfachste Lösung, es wird überhaupt kein Javascript benötigt und es zerstört Ihr Dropdown nicht. Funktioniert mit Bootstrap 4.

Answer 3

[Bootstrap 4 Alpha 6][Rails] Für Rails-Entwickler führt e.stopPropagation() zu unerwünschtem Verhalten für link_to mit data-method ungleich get, da es standardmäßig alle Anfragen als get zurückgeben wird.

Um dieses Problem zu beheben, schlage ich diese Lösung vor, die universell ist

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

       Menüpunkt 1

Answer 4

Dies hat mir geholfen,

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

Ihr Dropdown-Menü-Element muss so aussehen, (beachten Sie die Klassen dropdown-menu und keepopen.

Der obige Code verhindert das Binden am gesamten , sondern an das spezifische Element mit der Klasse dropdown-menu.

Hoffentlich hilft das jemandem.

Danke.

Answer 5

Mit Angular2 Bootstrap können Sie in den meisten Szenarien nonInput verwenden:

nonInput - (Standard) schließt das Dropdown-Menü automatisch, wenn eines seiner Elemente geklickt wird - solange das angeklickte Element kein Eingabefeld oder Textbereich ist.

https://valor-software.com/ng2-bootstrap/#/dropdowns