web-dev-qa-db-fra.com

Twitter bootstrap arrêter la propagation sur la liste déroulante ouverte

J'ai un menu déroulant d'amorçage Twitter à l'intérieur d'une div avec le plugin jOrgChart.

Le problème que je rencontre est que lorsque je clique sur le bouton pour ouvrir le menu déroulant, il déclenche également un événement de clic dans la div parente qui réduit les autres éléments.

C'est mon 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>

Je veux empêcher le clic de a.dropdown-toggle de bouillonner en div.node, j'ai essayé avec ceci:

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

Mais maintenant, le menu déroulant ne fonctionne pas.

MODIFIER

Voici le cas concret: http://jsfiddle.net/UTYma/2/ (Merci à Joe Tuskan pour avoir lancé le violon)

javascriptjqueryjavascript-eventstwitter-bootstrap
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();
});​

Arrêtez la propagation puis basculez. Exemple

Je devais ajouter les éléments du menu déroulant au gestionnaire de clics pour maintenir le comportement constant.

16
Joe

Essayez quelque chose comme ça:

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

            e.isDropDownToggleEvent =true;
})

Ensuite:

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

     return true;      
})

Vous pouvez également essayer de mettre e.preventDefault () ou e.stopPropagation (); au lieu de retourner false.

4
Sebastian.Belczyk

J'ai utilisé

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

Ceci est similaire à la réponse de @ Joe, mais un peu plus générique

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

Vous devriez utiliser ceci à la place car la solution ci-dessus ne ferme pas la liste déroulante lors de la mise au point.

1
AvcS

S'appuyant sur la réponse de Joe, cela inclut la fonctionnalité de menu déroulant normale consistant à fermer au prochain clic.

$("#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

Si je comprends bien, vous voulez éviter de fermer le menu.

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