Twitter引导程序在下拉列表中停止传播

Question

我在插件jOrgChart的div中有一个twitter bootstrap下拉列表.

我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父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从冒泡到div.node,我尝试了这个:

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

但现在下拉列表不起作用.

编辑

这是具体案例:http://jsfiddle.net/UTYma/2/ (感谢Joe Tuskan开始小提琴)

Answer 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();
});?

停止传播然后切换.例

我必须将下拉菜单项添加到单击处理程序以保持行为不变.