Twitter引导程序在下拉列表中停止传播
我在插件jOrgChart的div中有一个twitter bootstrap下拉列表。
我遇到的问题是，当我单击按钮打开下拉菜单时，它还会触发父div中的单击事件，该事件会执行其他元素的折叠。
这是我的HTML：
...
我想阻止点击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开始小提琴）
$("#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 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。
我用了
$('.multiselect').on('click', function (e) { $(this).next('.dropdown-menu').toggle(); e.stopPropagation(); });
这类似于@ Joe的答案，但更通用一些
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) { e.stopPropagation(); $(this).closest('.dropdown').toggleClass('open'); });
你应该使用它，因为上面的解决方案不会关闭焦点输出的下拉列表。
如果我理解正确，你想避免关闭菜单。
$("div#chart .dropdown-menu li").bind('click',function (e) { e.stopPropagation(); },false);
基于Joe的回答，这包括关闭下一次点击的正常下拉function。
$("#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()); });