Twitter引导在下拉菜单打开时停止传播

Question

我在一个div中有一个twitter引导下拉列表，其中有一个插件jOrgChart。

我遇到的问题是，当我单击按钮打开下拉菜单时，它还会在父div中触发一个click事件，该事件会折叠其他元素。

这是我的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>

我想防止.dropdown-toggle的点击冒泡到div.node，我尝试了以下方法：

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

但是现在下拉菜单不起作用了。

编辑

具体情况如下：http://jsfiddle.net/UTYma/2/（感谢Joe Tuskan开始演奏小提琴）

Answer 1

我用了

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

这与@Joe的答案相似，但更一般

Answer 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（）；而不是返回false。

Answer 3

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

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

停止传播，然后切换。实例