webentwicklung-frage-antwort-db.com.de

Twitter-Bootstrap stoppt die Weitergabe beim Öffnen der Dropdown-Liste

Ich habe ein Twitter-Bootstrap-Dropdown innerhalb eines Div mit dem Plugin jOrgChart.

Das Problem, das ich habe, ist, dass wenn ich auf die Schaltfläche klicke, um das Dropdown-Menü zu öffnen, auch ein Klickereignis im übergeordneten Div ausgelöst wird, das einen Zusammenbruch anderer Elemente bewirkt.

Das ist mein HTML:

<div id="chart">
<div class="node">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Actions
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="text-align:left;">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

<div class="node">
...
</div>

Ich möchte verhindern, dass ein Klick auf einen Dropdown-Button zu div.node sprudelt. Ich habe folgendes versucht:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
            e.stopPropagation();
        });

Aber jetzt funktioniert das Dropdown nicht.

EDIT

Dies ist der konkrete Fall: http://jsfiddle.net/UTYma/2/ (Danke an Joe Tuskan für den Start der Geige)

22
Escobar5
$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $('.dropdown-menu').toggle();
});​

Propagierung stoppen und dann umschalten. Beispiel


Ich musste die Dropdown-Menüelemente zum Click-Handler hinzufügen, um das Verhalten konstant zu halten.

16
Joe

Versuchen Sie etwas so:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {

            e.isDropDownToggleEvent =true;
})

Dann:

$("div.node").click(function (e) {
     if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
         return false;

     return true;      
})

Sie können auch versuchen, e.preventDefault () oder e.stopPropagation () zu setzen. anstatt falsch zurückzukehren.

4

Ich benutzte

$('.multiselect').on('click', function (e) {
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
});

Dies ist der Antwort von @ Joe ähnlich, aber etwas allgemeiner

1
thelem
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $(this).closest('.dropdown').toggleClass('open');
});​

Sie sollten dies stattdessen verwenden, da bei der obigen Lösung das Dropdown-Menü nicht geschlossen wird.

1
AvcS

Basierend auf Joes Antwort schließt dies die normale Dropdown-Funktion ein, die beim nächsten Klick geschlossen wird.

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click((e) => {
    e.stopPropagation();
    $('.dropdown-menu').toggle();

    // close on next click only
    $(window).one("click", () => $('.dropdown-menu').toggle());
});​
0
Eric Amshukov

Wenn ich es richtig verstanden habe, möchten Sie das Schließen des Menüs vermeiden.

$("div#chart .dropdown-menu li").bind('click',function (e) {
            e.stopPropagation();
        },false);
0
Luca Rainone