Twitter parada de arranque en la propagación desplegable abierta

Tengo un desplegable gorjeo de arranque dentro de un div con el plugin jOrgChart.Twitter parada de arranque en la propagación desplegable abierta

El problema que estoy teniendo es que cuando hago clic en el botón para abrir el menú desplegable que también desencadena un evento click en el div padre que hace un colapso de los otros elementos.

Esta es mi 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>

Quiero evitar que el clic de a.dropdown-toggle de burbujeo a div.node, he intentado con esto:

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

Pero ahora el menú desplegable no funciona.

EDITAR

Este es el caso concreto: http://jsfiddle.net/UTYma/2/ (Gracias a Joe Tuskan para iniciar el violín)

Fuente

2012-09-07 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(); 
});

Stop Propagation then toggle. Example

he tenido que añadir el menú desplegable de elementos de menú para el controlador de clic para mantener constante el comportamiento.

Fuente

2012-09-07 18:43:18 Joe

No, de esa manera el menú desplegable tampoco funciona. – Escobar5

http://jsfiddle.net/UTYma/ ¿Puedes editar eso, porque no estoy seguro de lo que estás tratando de hacer? – Joe

Lo edité, el gráfico div # faltaba, puedes comprobar ahora que el menú desplegable no funciona – Escobar5

intentar algo como esto:

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

      e.isDropDownToggleEvent =true; 
})

continuación:

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

    return true;  
})

Yo También puedes intentar poner e.preventDefault() o e.stopPropagation(); en lugar de devolver falso

Fuente

2012-09-07 18:39:04

La cosa es que, con stopPropagation ya estoy parando burbujeo caso, el problema que tengo es que ahora el menú desplegable no funciona bien. – Escobar5

Me di cuenta de que hace unos segundos actualicé mi respuesta. La idea básica es detectar cuando se trata de un evento de clic que burbujeaba desde el menú desplegable de alternar y que funcionaba en consecuencia. –

debería ser la respuesta correcta. – Billybobbonnet

Si he entendido bien, se quiere evitar menú de cierre.

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

Fuente

2012-09-07 19:02:48

No, quiero que el menú funcione normalmente, solo quiero que cuando el usuario haga clic en el botón para abrir el menú, el evento no burbujee (Debido a que el div que contiene el menú también tiene un evento para colapsar otros elementos) – Escobar5

Para ser claros, estoy usando jOrgChart, y tengo el menú dentro de un nodo: http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html – Escobar5

que utilizan

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

Esto es similar a @ respuesta de Joe, pero un poco más genérico

Fuente

2015-07-14 10:30:08 thelem

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

Usted debe utilizar este lugar como la solución anterior no se cierra el menú desplegable en foco.

Fuente

2016-05-24 06:56:14 AvcS

Twitter parada de arranque en la propagación desplegable abierta

Respuesta

Cuestiones relacionadas