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、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()追加されます。
アップデート
ローマンに感謝彼の答え。また、答えは下記をご覧ください。
ベストアンサー1
これも役立つはずだ
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
e.stopPropagation();
});