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

我在一个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>

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

编辑

---

这是一个具体的例子：（感谢乔·图斯卡开始拉小提琴）

试试这样的方法：

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

            e.isDropDownToggleEvent =true;
})

然后：

您还可以尝试放置e.preventDefault（）或e.stopPropagation（）；而不是返回false

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

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

停止传播，然后切换。

---

---

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

如果我理解正确，您希望避免关闭菜单

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

我曾经

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

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

---

您应该改为使用此选项，因为上述解决方案不会在焦点退出时关闭下拉列表。

基于Joe的答案，这包括在下一次单击时关闭的正常下拉功能

$("#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());
});​

---

问题是，使用StopRopagation，我已经停止了事件冒泡，问题是现在下拉菜单也不起作用。我意识到几秒钟前我更新了我的答案。其基本思想是检测从“切换”下拉列表中冒泡的单击事件，并相应地完成工作。这是一个不同的事件（firefox和chrome）。@Menelaos try

e.originalEvent.isDropDownToggleEvent

相反（假设您使用jQuery）@Dunc谢谢您的回复，如果我能记住这是用于什么项目，我会按照您的建议做：）您能编辑吗，因为我不确定您想做什么。我编辑了它，div#图表已丢失，您可以检查下拉列表是否不起作用。请将其与您的编辑一起使用，希望它适合您的解决方案。此解决方案的一个缺点是调用toggle（）在下拉列表中，遗漏了原始单击事件处理程序的一些功能，例如设置通过单击屏幕上的任意位置来关闭下拉列表的功能，imho，@Sebastian.Belczyk answer更好，因为它避免了上述缺点。不，我希望菜单正常工作，我只想当用户点击按钮打开菜单时，事件不会冒泡（因为包含菜单的div也有一个事件来折叠其他元素），我使用的是jOrgChart，我在一个节点中有菜单：

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

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

$("#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());
});​