Javascript Twitter 引导程序在下拉菜单打开时停止传播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12323066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap stop propagation on dropdown open
提问by Escobar5
I have a twitter bootstrap dropdown inside a div with the plugin jOrgChart.
我在带有插件 jOrgChart 的 div 中有一个 twitter bootstrap 下拉菜单。
The problem I'm having is that when I click the button to open the dropdown menu it also triggers a click event in the parent div that does a collapse of other elements.
我遇到的问题是，当我单击按钮打开下拉菜单时，它还会触发父 div 中的单击事件，该事件会折叠其他元素。
This is my html:
这是我的 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>
I want to prevent the click of a.dropdown-toggle from bubbling to div.node, I tried with this:
我想防止 a.dropdown-toggle 的点击冒泡到 div.node，我试过这个：
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.stopPropagation();
});
But now the dropdown isn't working.
但现在下拉菜单不起作用。
EDIT
编辑
This is the concrete case: http://jsfiddle.net/UTYma/2/(Thanks to Joe Tuskan for starting the fiddle)
这是具体案例：http: //jsfiddle.net/UTYma/2/（感谢 Joe Tuskan 开始小提琴）
采纳答案by Joe
回答by Sebastian.Belczyk
Try something like this:
尝试这样的事情：
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.isDropDownToggleEvent =true;
})
Then:
然后：
$("div.node").click(function (e) {
if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
return false;
return true;
})
You can also try to put e.preventDefault() or e.stopPropagation(); instead of return false.
你也可以尝试把 e.preventDefault() 或 e.stopPropagation(); 而不是返回false。
回答by thelem
I used
我用了
$('.multiselect').on('click', function (e) {
$(this).next('.dropdown-menu').toggle();
e.stopPropagation();
});
This is similar to @Joe's answer, but a bit more generic
这类似于@Joe 的回答，但更通用
回答by AvcS
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(this).closest('.dropdown').toggleClass('open');
});?
You should use this instead as above solution doesn't close the dropdown on focus out.
您应该使用它，因为上面的解决方案不会关闭焦点的下拉列表。
回答by Eric Amshukov
Building on Joe's answer, this includes the normal dropdown functionality of closing on the next click.
基于 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());
});?
回答by Luca Rainone
If I understand correctly, you want to avoid closing menu.
如果我理解正确，您希望避免关闭菜单。
$("div#chart .dropdown-menu li").bind('click',function (e) {
e.stopPropagation();
},false);
