javascript - plugin - bootstrap tabs events

Twitter bootstrap detener la propagación en el menú desplegable abierto

Question

Tengo un menú desplegable de inicio de Twitter dentro de un div con el complemento jOrgChart.

El problema que tengo es que cuando hago clic en el botón para abrir el menú desplegable, también activa un evento de clic en el div principal que hace que se colapsen otros elementos.

Este 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 un. Dropdown-toggle de burbujear a div.node, he intentado con esto:

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

Pero ahora el desplegable no está funcionando.

EDITAR

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

Answer 1

Intenta algo como esto:

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

            e.isDropDownToggleEvent =true;
})

Entonces:

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

     return true;      
})

También puede intentar poner e.preventDefault () o e.stopPropagation (); En lugar de devolver el falso.

Answer 2

Si entiendo correctamente, desea evitar cerrar el menú.

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

Answer 3

Sobre la base de la respuesta de Joe, esto incluye la funcionalidad desplegable normal de cierre en el siguiente 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());
});​

Answer 4

solía

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

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

Answer 5

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

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

Detener la propagación y luego alternar. Example

Tuve que agregar los elementos del menú desplegable al controlador de clic para mantener el comportamiento constante.

Answer 6

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

Debe usar esto en su lugar, ya que la solución anterior no cierra el menú desplegable al enfocar hacia fuera.