避免点击里面的下拉菜单
我有一个Twitter Bootstrap下拉菜单。 正如所有Twitter Bootstrap用户所知道的，下拉菜单在点击时关闭（甚至在其内部点击）。
为了避免这种情况，我可以轻松地在下拉菜单上附加一个点击事件处理程序，并简单地添加着名的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对象，因此这些元素（ prev / next控件，...）上的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事件不是解决方案，原因如下：
flag类是不可能的 这个小提琴是正常的行为，这个小提琴与添加event.stopPropagation() 。
更新
感谢罗马的回答。 我还找到了一个你可以在下面找到的答案。
删除数据属性data-toggle="dropdown"并实现data-toggle="dropdown"的打开/关闭可以是一个解决方案。
首先通过点击链接来打开/关闭下拉菜单，如下所示：
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
然后在下拉菜单之外监听点击以关闭它，如下所示：
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target)
&& $('li.dropdown.mega-dropdown').has(e.target).length === 0
&& $('.open').has(e.target).length === 0
) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
这里是演示：http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
这应该也有帮助
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
e.stopPropagation();
});
Bootstrap提供以下功能：
| This event is fired immediately when the hide instance method
hide.bs.dropdown | has been called. The toggling anchor element is available as the
| relatedTarget property of the event.因此，实现这个功能应该可以禁用关闭下拉菜单。
$('#myDropdown').on('hide.bs.dropdown', function (e) {
var target = $(e.target);
if(target.hasClass("keepopen") || target.parents(".keepopen").length){
return false; // returning false should stop the dropdown from hiding.
}else{
return true;
}
});