避免点击里面的下拉菜单 [英] Avoid dropdown menu close on click inside
问题描述
我有一个Twitter Bootstrap下拉菜单。正如所有的Twitter Bootstrap用户所知道的那样,下拉菜单在点击时关闭(甚至点击它)。
为了避免这种情况,我可以在下拉列表中轻松附加点击事件处理程序菜单,并简单地添加着名的 event.stopPropagation()
。
< ul class =nav navbar-nav>
< li class =dropdown mega-dropdown>
< a href =javascript :; class =dropdown-toggledata-toggle =dropdown>
< i class =fa fa-list-alt>< / i>菜单项1
< span class =fa fa-chevron-down pull-right>< / span>
< / a>
< ul class =dropdown-menu mega-dropdown-menu>
< li>
< div id =carouselclass =carousel slidedata-ride =carousel>
< li data-slide-to =0data-target =#carousel>< / li>
< li class =activedata-slide-to =1data-target =#carousel>< / li>
< / ol>
< div class =carousel-inner>
< div class =item>
< img alt =class =img-roundedsrc =img1.jpg>
< / div>
< div class =item active>
< img alt =class =img-roundedsrc =img2.jpg>
< / div>
< / div>
class =left carousel-control>
< span class =glyphicon glyphicon-chevron-left>< / span>
< / a>
class =right carousel-control>
< span class =glyphicon glyphicon-chevron-right>< / span>
< / a>
< / div>
< / li>
< / ul>
< / li>
< / ul>
然而,这看起来很简单且很常见,因为 carousel indicators
)事件处理程序委托给文档
对象,这些元素( prev / next 控件,...)中的点击
事件将被忽略。
$('click',function(event){
// $'code $('ul.dropdown-menu.mega-dropdown-menu')。这个事件不会传播到文档NODE和
//因此委托事件不会被触发
event.stopPropagation();
});
依靠Twitter Bootstrap下拉菜单 hide
/ 隐藏
事件不是解决方案,原因如下:
标记
类不是可能的
这个小提琴是正常的行为,这个小提琴与 event.stopPropagation()
添加。
更新
他的回答。我还发现了一个答案,您可以在下面找到。
删除数据属性 data-toggle =dropdown
并实现下拉的打开/关闭可以是一个解决方案。 p>
首先通过点击链接打开/关闭下拉菜单,如下所示:
<$ c'c> $('li.dropdown.mega-dropdown a')。on('click',function(event){
$(this).parent()。toggleClass('open');
});
,然后听取下拉外部的点击以便像这样关闭它:
$ b $($'$'$'$ $ $'$'$'$'$'$'''。')。('click',function(e){if(!$('li.dropdown。 (e.target)
&& $('li.dropdown.mega-dropdown')。has(e.target).length === 0
& amp ;& $('。open')。has(e.target).length === 0
){
$('li.dropdown.mega-dropdown')。removeClass('open ');
}
});
以下是演示:
http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).
To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous 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>
This looks easy and a very common behavior, however, and since carousel-controls
(as well as carousel indicators
) event handlers are delegated to the document
object, the click
event on these elements (prev/next controls, ...) will be "ignored".
$('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();
});
Relying on Twitter Bootstrap dropdown hide
/hidden
events is not a solution for the following reasons:
- The provided event for both event handlers doesn’t give you reference to the clicked element
- The dropdown menu content is dynamically generated so adding a
flag
class is not possible
This fiddle is the normal behavior and this fiddle is with event.stopPropagation()
added.
Update
Thanks to Roman for his answer. I also found an answer that you can find below.
Removing the data attribute data-toggle="dropdown"
and implementing the open/close of the dropdown can be a solution.
First by handling the click on the link to open/close the dropdown like this :
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass('open');
});
and then listening the clicks outside of the dropdown to close it like this :
$('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');
}
});
Here is the demo : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
这篇关于避免点击里面的下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!