我有一个Twitter Bootstrap下拉菜单.正如所有Twitter Bootstrap用户都知道的那样,下拉菜单会在点击时关闭(甚至在其中单击).
为了避免这种情况,我可以在下拉菜单上轻松附加一个click事件处理程序,只需添加着名的event.stopPropagation().
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control"> …Run Code Online (Sandbox Code Playgroud) 我在插件jOrgChart的div中有一个twitter bootstrap下拉列表.
我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父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>
Run Code Online (Sandbox Code Playgroud)
我想阻止点击a.dropdown-toggle从冒泡到div.node,我尝试了这个:
$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
e.stopPropagation();
});
Run Code Online (Sandbox Code Playgroud)
但现在下拉列表不起作用.
编辑
这是具体案例:http://jsfiddle.net/UTYma/2/ (感谢Joe Tuskan开始小提琴)