Twitter引导程序在下拉列表打开时停止传播
Twitter bootstrap stop propagation on dropdown open
我在带有插件jOrgChart的div中有一个twitter引导程序下拉列表。
我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父div中的一个单击事件,该事件会折叠其他元素。
这是我的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>
我想防止a.dropdowntoggle的点击冒泡到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');
});
您应该使用这个来代替,因为上面的解决方案不会关闭焦点的下拉列表。
基于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());
});
如果我理解正确,您希望避免关闭菜单。
$("div#chart .dropdown-menu li").bind('click',function (e) {
e.stopPropagation();
},false);
相关文章:
- Html引导程序警报自动关闭困难
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- Twitter引导程序Typeahead-Id&标签
- 引导程序崩溃一次只能看到一个
- 引导程序/基础堆叠行/列
- 如何保持引导程序下拉复选框列表下拉
- .aspx页面上引导程序中的动态选项卡
- 菜单栏class=活动引导程序主题无法正常工作
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 如何在引导程序元素的顶部添加掩码
- 如何平滑地设置twitter引导程序进度条的动画
- 如何在模式弹出窗口中使用引导程序日期和时间选择器
- 引导程序转盘不工作:堆叠图像(使用rails)
- datepicker引导程序再次初始化
- Nano Scroller在引导程序DropDown和Model Box中不起作用
- 如何在1920px大屏幕的引导程序中将容器大小更改为960px
- Twitter引导程序在下拉列表打开时停止传播
- 文本链接可更改引导程序选项卡
- 如何获取模式引导程序上的值复选框
- 如何在引导程序datetimepicker js文件中的datetime picker中传播以前的日期