避免在单击内部时关闭下拉菜单
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-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 引导下拉hide/hidden 事件不是解决方案，原因如下：
- 为两个事件处理程序提供的事件对象不引用单击的元素
- 我无法控制下拉菜单内容，因此无法添加
flag类或属性
正常行为，这个小提琴是添加event.stopPropagation()的。
更新
感谢罗曼的回答。我还找到了一个答案，您可以在下面找到。
这也应该有所帮助
$(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/
绝对最好的答案是在类下拉菜单后放置一个表单标签
所以你的代码是
<ul class="dropdown-menu">
<form>
<li>
<div class="menu-item">bla bla bla</div>
</li>
</form>
</ul>
Bootstrap 提供以下功能：
|当隐藏实例方法时，将立即触发此事件隐藏.bs.下拉列表 |已被调用。切换锚元素可用作 |事件的相关目标属性。
因此，实现此函数应该能够禁用下拉列表关闭。
$('#myDropdown').on('hide.bs.dropdown', function (e) {
var target = $(e.clickEvent.target);
if(target.hasClass("keepopen") || target.parents(".keepopen").length){
return false; // returning false should stop the dropdown from hiding.
}else{
return true;
}
});
这可能会有所帮助：
$("dropdownmenuname").click(function(e){
e.stopPropagation();
})
在新的Bootstrap 5中，解决方案非常简单。
引用文档页面：
默认情况下，下拉菜单在以下情况下关闭单击下拉菜单内部或外部。您可以使用自动关闭选项以更改下拉列表的此行为。
除了默认行为之外，我们还有 3 个选项可用：
- 外部可点击：
data-bs-auto-close="outside" - 可点击内部：
data-bs-auto-close="inside" - 手动关闭：
data-bs-auto-close="false"
例如：
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-bs-auto-close="inside" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
更多信息： https://getbootstrap.com/docs/5.1/components/dropdowns/#auto-close-behavior
我只是像下面这样添加onclick事件来不关闭下拉菜单。
<div class="dropdown-menu dropdown-menu-right" onclick="event.stopPropagation()" aria-labelledby="triggerId">
找到了解决方案。
假设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
});
希望它可以帮助任何寻找类似解决方案的人。
谢谢大家的帮助。
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
这可能适用于任何条件。
我尝试了这个简单的事情，它就像一个魅力。
我将下拉菜单元素从 <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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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" >
List Item 1
</li>
<li class="list-group-item" >
LI 2<input class="form-control" />
</li>
<li class="list-group-item" >
List Item 3
</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>
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".show") && e.stopPropagation();
});
例如，Bootstrap 4 Alpha 有这个菜单事件。为什么不用？
// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
e.stopPropagation();
e.preventDefault();
});
使用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
引导程序 5
如果有人通过谷歌想要像我一样的 Bootstrap 5 版本，它是通过添加 data-bs-auto-close="outside" 来内置的。请注意，该选项autoClose但作为数据属性传递时，驼峰将被删除并用短划线分隔。
我在下拉列表中有一个折叠小部件，并将data-bs-auto-close="outside"添加到父data-bs-toggle="dropdown"触发器在切换折叠时保持下拉列表打开。
请参阅官方引导文档：https://getbootstrap.com/docs/5.1/components/dropdowns/#options这个代码笔作为示例代码(不是我的笔(：https://codepen.io/SitePoint/pen/BaReWGe<</p>
我最近遇到了类似的问题，并尝试了不同的方法来通过删除数据属性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 在支持下拉列表中<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();
});
您可以简单地执行链接本身的点击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)
}
}
您可以停止点击下拉菜单进行传播，然后使用轮播 JavaScript 方法手动重新实现轮播控件。
$('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');
});
我再次更新了它，使其尽可能智能和实用。 现在，当您将鼠标悬停在导航外时，它会关闭，当您在导航内时，它会保持打开状态。 简直完美。
我知道已经有一个先前的答案建议使用表单，但提供的标记不正确/理想。这是最简单的解决方案，根本不需要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>
Angular2 Bootstrap，您可以在大多数场景中使用 nonInput：
<div dropdown autoClose="nonInput">
nonInput -(默认(在单击其任何元素时自动关闭下拉列表 — 只要单击的元素不是输入或文本区域。
https://valor-software.com/ng2-bootstrap/#/dropdowns
[Bootstrap 4 Alpha 6][Rails]对于 rails 开发人员来说，e.stopPropagation()将导致data-method不等于 get 的link_to出现不良行为，因为它默认情况下会将您的所有请求作为 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 false;
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<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>我有帮助，
$('.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的特定元素进行投标。
希望这对某人有所帮助。
谢谢。
最简单的工作解决方案是：
- 将类添加到不应导致下拉列表关闭
keep-open元素 - 剩下的就是这段代码了：
$('.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 - 仅当用户单击下拉列表外的任何元素时，才会自动关闭下拉列表。
禁用 - 禁用自动关闭
看看下面的 plunkr ：
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
设置
uib-dropdown auto-close="disabled"
希望这对:)有所帮助
在.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
}
});
以前的案例避免了与容器对象相关的事件，现在容器继承了类保持打开并在关闭之前进行检查。
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单，onclick会出现，而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 基于下拉菜单创建开关
- 动态填充两个下拉菜单
- 如何将CSS(特别是填充/边距）应用于select下拉菜单的选项或optgroup
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- JavaScript下拉菜单-部件在Mac上消失
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 从选择下拉菜单中获取数据
- 如果在内部单击下拉菜单，则不应将其关闭
- 避免在单击内部时关闭下拉菜单
