我有一个推特 bootstrap 下拉菜单.正如所有推特 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
事件(prev/next个控件,.)将被"忽略".
$('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
事件不是解决方案:
- 为这两个事件处理程序提供的事件对象不引用已单击的元素
- 我无法控制下拉菜单内容,因此无法添加
flag
类或属性
This fiddle为正常行为,this fiddle为添加event.stopPropagation()
.
使现代化
感谢罗曼的answer that you can find below/3165879">his answer美元.我还找到了answer that you can find below.