單擊里面,避免關(guān)閉下拉菜單我有一個Twitter Bootstrap下拉菜單。正如所有Twitter Bootstrap用戶都知道的那樣,下拉菜單會在點擊時關(guān)閉(甚至在其中單擊)。為了避免這種情況,我可以在下拉菜單上輕松附加一個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 / nextcontrols,...)將被“忽略”。$('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下拉h(huán)ide/ hidden事件不是解決方案:兩個事件處理程序提供的事件對象都不提供對單擊元素的引用我無法控制下拉菜單內(nèi)容,因此flag無法添加類或?qū)傩赃@個小提琴是正常的行為,這個小提琴是event.stopPropagation()附加的。更新感謝羅曼的回答。我也找到了一個你可以在下面找到的答案。
單擊里面,避免關(guān)閉下拉菜單
慕少森
2019-07-29 16:24:10