我有一个 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
事件(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
事件不是解决方案,原因如下:
为两个事件处理程序提供的事件对象不引用单击的元素
我无法控制下拉菜单内容,因此无法添加标志类或属性
This fiddle 是正常行为,this fiddle 添加了 event.stopPropagation()
。
更新
感谢 Roman 的 his answer。我还找到了一个 answer that you can find below。
event propagation
已停止,轮播没有滑动。
这也应该有帮助
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
e.stopPropagation();
});
删除数据属性 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/
// PREVENT INSIDE CLICK DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
e.stopPropagation()
是最佳解决方案。
绝对最好的答案是在类下拉菜单之后放置一个表单标签
所以你的代码是
<ul class="dropdown-menu">
<form>
<li>
<div class="menu-item">bla bla bla</div>
</li>
</form>
</ul>
<li>
元素不应位于 <form>
元素内。
Bootstrap provides the following function:
| 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;
}
});
target
属性也是 li.dropdown
,relatedTarget
是 a.dropdown-toggle
。因此,您不能在 hide
事件处理程序中引用 clicked 元素。
target.hasClass(".keepopen")
应该是 target.hasClass("keepopen")
。否则代码将无法工作。
这可能会有所帮助:
$("dropdownmenuname").click(function(e){
e.stopPropagation();
})
我也找到了解决办法。
假设 Twitter Bootstrap Components
相关事件处理程序被委托给 document
对象,我循环附加的处理程序并检查当前单击的元素(或其父元素之一)是否与委托事件有关。
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
var events = $._data(document, 'events') || {};
events = events.click || [];
for(var i = 0; i < events.length; i++) {
if(events[i].selector) {
//Check if the clicked element matches the event selector
if($(event.target).is(events[i].selector)) {
events[i].handler.call(event.target, event);
}
// Check if any of the clicked element parents matches the
// delegated event selector (Emulating propagation)
$(event.target).parents(events[i].selector).each(function(){
events[i].handler.call(this, event);
});
}
}
event.stopPropagation(); //Always stop propagation
});
希望它可以帮助任何寻找类似解决方案的人。
谢谢大家的帮助。
我只是添加如下 onclick 事件以不关闭下拉菜单。
<div class="dropdown-menu dropdown-menu-right" onclick="event.stopPropagation()" aria-labelledby="triggerId">
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
这可能适用于任何条件。
我尝试了这个简单的事情,它就像一个魅力。
我将 dropdown-menu 元素从 <div>
更改为 <form>
,效果很好。
<div class="nav-item dropdown" >
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
Click to open dropdown
</a>
<form class="dropdown-menu ">
<ul class="list-group text-black">
<li class="list-group-item" >
</li>
<li class="list-group-item" >
</li>
</ul>
</form>
jQuery:
<script>
$(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
e.stopPropagation();
});
</script>
HTML:
<div class="dropdown keep-inside-clicks-open">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
演示:
通用:https://jsfiddle.net/kerryjohnson/omefq68b/1/
您使用此解决方案的演示:http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
我修改了@Vartan 的答案以使其与 Bootstrap 4.3 一起使用。他的解决方案不再适用于最新版本,因为无论点击位于何处,target
属性始终返回下拉菜单的根 div
。
这是代码:
$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
if (!e.clickEvent) {
// There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked.
// What we usually want to happen in such situations is to hide the dropdown so we let it hide.
return true;
}
var target = $(e.clickEvent.target);
return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
$('.dropdown-keep-open').on('hide.bs.dropdown', ev => !(ev.clickEvent && $(ev.target).has(ev.clickEvent.target).length))
return !target.closest('.dropdown-keep-open').length)
简化。也就是说,这是一个很好的解决方案!发现这需要解决这个问题。
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".show") && e.stopPropagation();
});
在新的 Bootstrap 5 中,解决方案非常简单。
从文档页面引用:
默认情况下,在下拉菜单内部或外部单击时,下拉菜单会关闭。您可以使用 autoClose 选项来更改下拉菜单的此行为。
除了默认行为外,我们还有 3 个可用选项:
外部可点击:data-bs-auto-close="outside"
内部可点击:data-bs-auto-close="inside"
手动关闭:data-bs-auto-close="false"
更多信息:https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior
我最近遇到了类似的问题,并尝试了不同的方法来解决它,删除数据属性 data-toggle="dropdown"
并通过 event.stopPropagation()
调用监听 click
。
第二种方式看起来更可取。 Bootstrap 开发人员也使用这种方式。在源文件中,我发现了下拉元素的初始化:
// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);
所以,这一行:
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
建议您可以在具有类 .dropdown
的容器内放置一个 form
元素,以避免关闭下拉菜单。
例如 Bootstrap 4 Alpha 有这个菜单事件。为什么不使用?
// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
e.stopPropagation();
e.preventDefault();
});
e.preventDefault();
阻止链接,您可以跳过它
Bootstrap 通过支持下拉菜单中的 <form>
标签自己解决了这个问题。他们的解决方案非常容易掌握,您可以在此处阅读:https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js
它归结为防止在文档元素处传播,并且仅对匹配选择器 '.dropdown .your-custom-class-for-keep-open-on-click-elements'
的 'click.bs.dropdown.data-api'
类型的事件这样做。
或者在代码中
$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
event.stopPropagation();
});
form
方法不适合您的其他人 - 我使用类 dropleft
,但它还需要 dropdown
才能匹配表单选择器。
您也可以使用 form
标记。例子:
<div class="dropdown-menu">
<form>
Anything inside this wont close the dropdown!
<button class="btn btn-primary" type="button" value="Click me!"/>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Clik this and the dropdown will be closed</a>
<a class="dropdown-item" href="#">This too</a>
</div>
来源:https://getbootstrap.com/docs/5.0/components/dropdowns/#forms
您可以简单地在链接本身的点击事件上执行 event.stopPropagation
。像这样的东西。
$(".dropdown-menu a").click((event) => {
event.stopPropagation()
let url = event.target.href
//Do something with the url or any other logic you wish
})
编辑:如果有人看到这个答案并且正在使用反应,它将不起作用。 React 以不同的方式处理 javascript 事件,并且在调用 react 事件处理程序时,事件已经被触发和传播。为了克服这个问题,您应该像这样手动附加事件
handleMenuClick(event) {
event.stopPropagation()
let menu_item = event.target
//implement your logic here.
}
componentDidMount() {
document.getElementsByClassName("dropdown-menu")[0].addEventListener(
"click", this.handleMenuClick.bind(this), false)
}
}
您可以停止点击下拉菜单进行传播,然后使用 carousel javascript methods 手动重新实现轮播控件。
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('a.left').click(function () {
$('#carousel').carousel('prev');
});
$('a.right').click(function () {
$('#carousel').carousel('next');
});
$('ol.carousel-indicators li').click(function (event) {
var index = $(this).data("slide-to");
$('#carousel').carousel(index);
});
这是jsfiddle。
演示:http://jsfiddle.net/4y8tLgcp/
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
var $a = $(e.target), is_a = $a.is('.is_a');
if($a.hasClass('dropdown-toggle')){
$('ul.dropdown-menu', this).toggle(!is_a);
$a.toggleClass('is_a', !is_a);
}
}).on('mouseleave', function(){
$('ul.dropdown-menu',this).hide();
$('.is_a', this).removeClass('is_a');
});
我再次对其进行了更新,使其尽可能地智能和实用。现在,当您将鼠标悬停在导航之外时,它会关闭,而当您在导航内部时,它会保持打开状态。简直完美。
show
后,下拉菜单不会在点击外部时关闭,我们需要先点击下拉菜单切换...无论如何+1
body
点击事件 ^^
$('body').on('click', function (e) {
我知道已经有一个先前的答案建议使用表单,但提供的标记不正确/不理想。这是最简单的解决方案,根本不需要 javascript,也不会破坏您的下拉菜单。与引导程序 4 一起使用。
<form class="dropdown-item"> <!-- Your elements go here --> </form>
我知道这个问题是专门针对 jQuery 的,但是对于任何使用 AngularJS 的人来说,你可以创建一个处理这个问题的指令:
angular.module('app').directive('dropdownPreventClose', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function(e) {
e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
});
}
};
});
然后只需将属性 dropdown-prevent-close
添加到触发菜单关闭的元素,它应该会阻止它。对我来说,它是一个自动关闭菜单的 select
元素:
<div class="dropdown-menu">
<select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
<option value="">Select Me</option>
</select>
</div>
<div class="dropdown-menu" ng-click="$event.stopPropagation()">
在 1.2.x 中为我工作
使用 Angular2 Bootstrap,您可以在大多数情况下使用 nonInput:
<div dropdown autoClose="nonInput">
nonInput -(默认)在单击其任何元素时自动关闭下拉列表-只要单击的元素不是输入或文本区域。
https://valor-software.com/ng2-bootstrap/#/dropdowns
[Bootstrap 4 Alpha 6][Rails] 对于 rails 开发人员,e.stopPropagation()
将导致 link_to
出现不良行为,其中 data-method
不等于 get
,因为默认情况下它会将您的所有请求作为 get
返回。
为了解决这个问题,我建议这个解决方案,它是通用的
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
return $('.dropdown').one('hide.bs.dropdown', function() {
return false;
});
});
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() { return $('.dropdown').one('hide.bs.dropdown', function() { return错误的; }); });
这对我有帮助,
$('.dropdown-menu').on('click', function (e) {
if ($(this).parent().is(".open")) {
var target = $(e.target);
if (target.hasClass("keepopen") || target.parents(".keepopen").length){
return false;
}else{
return true;
}
}
});
您的下拉菜单元素必须是这样的(记下 dropdown-menu
和 keepopen
类。
<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">
上面的代码阻止对整个 <body>
出价,而不是对具有类 dropdown-menu
的特定元素出价。
希望这可以帮助某人。
谢谢。
引导程序 5
如果有人通过 Google 想要一个像我一样的 Bootstrap 5 版本,它是通过添加 data-bs-auto-close="outside"
内置的。注意选项是 autoClose
但是当作为数据属性传递时,camelcasing 被删除 &用破折号分隔。
我在下拉列表中有一个折叠小部件 &将 data-bs-auto-close="outside"
添加到父 data-bs-toggle="dropdown"
触发器会在切换折叠时保持下拉菜单打开。
请参阅官方 Bootstrap 文档:https://getbootstrap.com/docs/5.1/components/dropdowns/#options 这个 codepen 示例代码(不是我的笔):https://codepen.io/SitePoint/pen/BaReWGe
对我来说最简单的工作解决方案是:
向不应导致下拉关闭的元素添加保持打开类
剩下的就是这段代码:
$('.dropdown').on('click', function(e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
我发现没有一个解决方案像我想使用默认引导导航那样工作。这是我对这个问题的解决方案:
$(document).on('hide.bs.dropdown', function (e) {
if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
$(e.relatedTarget).parent().removeClass('open');
return true;
}
return false;
});
而不是编写一些 javascript 或 jquery 代码(重新发明轮子)。上述场景可以通过引导自动关闭选项进行管理。您可以提供任一值来自动关闭:
always - (默认)在单击其任何元素时自动关闭下拉菜单。 outsideClick - 仅当用户单击下拉列表之外的任何元素时才会自动关闭下拉列表。 disabled - 禁用自动关闭
看看以下 plunkr :
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
放
uib-dropdown auto-close="disabled"
希望这可以帮助 :)
ui-bootstrap
的人,对于查看此问题的很多人来说可能并非如此。
uib-dropdown auto-close="outsideClick"
。点击内部菜单关闭只是有点不舒服,但点击外部菜单不关闭非常令人不安。
在 .dropdown
内容中,将 .keep-open
类放在任何标签上,如下所示:
$('.dropdown').on('click', function (e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
if (target.hasClass('keep-open')) {
$(dropdown).addClass('keep-open');
} else {
$(dropdown).removeClass('keep-open');
}
});
$(document).on('hide.bs.dropdown', function (e) {
var target = $(e.target);
if ($(target).is('.keep-open')) {
return false
}
});
之前的案例避免了与容器对象相关的事件,现在容器继承了keep-open类,关闭前检查。
不定期副业成功案例分享
'.dropdown-menu :not(.dropdown-item)'
,因此点击dropdown-item
会关闭弹出窗口,但点击dropdown-header
不会。