Twitter引导程序在下拉列表中停止传播 [英] Twitter bootstrap stop propagation on dropdown open
问题描述
我在插件jOrgChart的div中有一个twitter bootstrap下拉列表。
I have a twitter bootstrap dropdown inside a div with the plugin jOrgChart.
我遇到的问题是当我点击按钮打开下拉菜单时它还会触发父div中的click事件,该事件会崩溃其他元素。
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.
这是我的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.node的a.dropdown-toggle,我尝试了这个:
I want to prevent the click of a.dropdown-toggle from bubbling to div.node, I tried with this:
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.stopPropagation();
});
但现在下拉列表无效。
编辑
这是具体案例: http://jsfiddle.net/UTYma/2/ (感谢Joe Tuskan开始小提琴)
This is the concrete case: http://jsfiddle.net/UTYma/2/ (Thanks to Joe Tuskan for starting the fiddle)
推荐答案
$("#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
I had to add the drop down menu items to the click handler to keep the behavior constant.
这篇关于Twitter引导程序在下拉列表中停止传播的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!