我有一个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">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
但是,这看起来很简单,这是非常常见的行为,并且由于carousel-controls
(以及carousel indicators
)事件处理程序都委派给了document
对象,因此click
这些元素(上一个/下一个控件,...)上的事件将被“忽略”。
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
由于以下原因,不能依靠Twitter Bootstrap下拉列表hide
/ hidden
事件来解决:
- 为两个事件处理程序提供的事件对象未提供对clicked元素的引用
- 我无法控制下拉菜单的内容,因此
flag
无法添加类或属性
这小提琴是正常的行为,这种小提琴与event.stopPropagation()
补充。
更新资料
event propagation
已停止而没有滑动。