[英]Twitter bootstrap stop propagation on dropdown open
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开始小提琴)
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$('.dropdown-menu').toggle();
});
Stop Propagation then toggle. 停止传播然后切换。 Example 例
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(); 您也可以尝试将e.preventDefault()或e.stopPropagation(); instead of return false. 而不是返回false。
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的答案,但更通用一点
$("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. 你应该使用它,因为上面的解决方案不会关闭焦点输出的下拉列表。
If I understand correctly, you want to avoid closing menu. 如果我理解正确,你想避免关闭菜单。
$("div#chart .dropdown-menu li").bind('click',function (e) {
e.stopPropagation();
},false);
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());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.