Распространение запрета на загрузку Twitter в раскрывающемся меню

У меня есть раскрывающийся бутстрап twitter внутри div с плагином jOrgChart.

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю кнопку, чтобы открыть раскрывающееся меню, она также запускает событие click в родительском div, которое приводит к краху других элементов.

Это мой 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>

Я хочу, чтобы нажимать кнопку a.dropdown-toggle от bubbling до div.node, я попытался с этим:

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

Но теперь выпадающее меню не работает.

ИЗМЕНИТЬ

Это конкретный случай: http://jsfiddle.net/UTYma/2/ (спасибо Джо Тускану за запуск скрипки)

Ответы

Ответ 1

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

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

Остановить распространение, затем переключить. Пример

Я должен был добавить выпадающие пункты меню в обработчик кликов, чтобы поддерживать постоянство поведения.

Ответ 2

Попробуйте что-то вроде этого:

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

            e.isDropDownToggleEvent =true;
})

Тогда:

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

     return true;      
})

Вы также можете попробовать поставить e.preventDefault() или e.stopPropagation(); вместо return false.

Ответ 3

Я использовал

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

Это похоже на ответ @Joe, но немного более общий

Ответ 4

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

Вы должны использовать это вместо этого, поскольку вышеупомянутое решение не закрывает выпадающее меню.

Ответ 5

Если я правильно понимаю, вы хотите избежать закрытия меню.

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