单击关闭时,使引导下拉列表保持打开状态
Keep Bootstrap Dropdown Open When Clicked Off
如果下拉列表可见,并且我在下拉列表外部单击,它将关闭。我需要它不关闭。
从文档中:
打开时,该插件还会添加 .dropdown-backdrop 作为单击区域,以便在菜单外单击时关闭下拉菜单。
我可以添加哪些 JavaScript 来防止下拉列表关闭?
从 Bootstrap dropdown
文档的事件部分:
hide.bs.dropdown
:调用隐藏实例方法后,将立即触发此事件。
对于初学者来说,为了防止下拉列表关闭,我们可以只收听此事件并通过返回false
来阻止它继续:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
对于完整的解决方案,您可能希望允许在单击下拉列表本身时关闭它。 所以只有一些时候我们想要阻止盒子关闭。
为此,我们将在下拉列表引发的另外两个事件中设置.data()
标志:
-
shown.bs.dropdown
- 显示时,我们将.data('closable')
设置为false
-
click
- 单击后,我们会将.data('closable')
设置为true
因此,如果hide.bs.dropdown
事件是由下拉列表中的click
引发的,我们将允许关闭。
jsFiddle 中的现场演示
JavaScript
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
HTML(注意我已将类keep-open
添加到下拉列表中)
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#" class="btn btn-primary"
data-toggle="dropdown" data-target="#" >
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
某些依赖项中的版本更改导致 KyleMit 和大多数其他解决方案不再有效。我深入研究了一点,出于某种原因,当 Bootstrap 尝试并失败时会发送click()
hide.bs.dropdown
,然后是另一个调用hide.bs.dropdown
。我通过强制关闭click()
发生在按钮本身而不是整个下拉菜单上来解决此问题。
Bootply 中的现场演示
JavaScript
$('.keep-open').on({
"shown.bs.dropdown": function() { $(this).attr('closable', false); },
//"click": function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
"hide.bs.dropdown": function() { return $(this).attr('closable') == 'true'; }
});
$('.keep-open').children().first().on({
"click": function() {
$(this).parent().attr('closable', true );
}
})
.HTML
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = true; },
"click": function(e) {
var target = $(e.target);
if(target.hasClass("btn-primary"))
this.closable = true;
else
this.closable = false;
},
"hide.bs.dropdown": function() { return this.closable; }
});
body {
margin: 10px;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19740121/1366033'>Keep dropdown menu open</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
Bootstrap Documentation: <a href='http://getbootstrap.com/javascript/#dropdowns'>Dropdowns</a><br/>
<div>
我找到了一个不需要新js的解决方案。不要使用下拉列表,而是使用引导折叠。我仍然使用一些下拉类来将其样式设置为下拉列表。
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down
<span class="caret"></span></button>
<div id="myList" class="dropdown-menu">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br></div>
我设法使用了上面 KyleMitt 解决方案的组合,并在 Footable 对象中使用它时遇到了问题(我相信这是由于表格的动态创建)。我将 .keep-open 应用于顶层的 .dropdown .div。
$('#contact_table').on("click", '.keep-open', function () {
this.closable = false;
});
$('#contact_table').on("shown.bs.dropdown", '.keep-open', function () {
this.closable = true;
});
$('#contact_table').on("hide.bs.dropdown", '.keep-open', function () {
let ret = this.closable;
this.closable = true;
return ret;
});
此代码的功能允许您单击外部以关闭下拉列表,但单击其中的项将保持其打开状态。如果您对此有任何建议/意见,请告诉我,我将尝试编辑。
Mike Kane的解决方案大部分时间都有效,但在某些情况下,hide.bs.dropdown
事件在click()
事件之前触发,导致下拉列表在应该关闭时没有关闭。
我想出了另一种检查事件中clickEvent
对象的方法。我最初的计划是上 DOM 并检查clickEvent
目标是不是下拉列表的子目标,但发现如果您在下拉列表中单击clickEvent
是未定义的,并且如果您在它外部单击,事件是一个对象。
因此,这只是对clickEvent
是否作为对象存在的简单检查。
$('.dropdown.keep-open').on({
"hide.bs.dropdown": function(e) {
return (typeof(e.clickEvent) != 'object');
}
});
其他解决方案。在 .dropdown-menu 内单击后保持下拉列表打开:
$('.heading .options .dropdown').on({
"shown.bs.dropdown":function(){this.closable = true;},
"click": function(e){
var target = $(e.target);
var d = target.data();
if(typeof d.toggle != 'undefined' && d.toggle == 'dropdown')
this.closable = true;
else {
var p = target.parent();
var dd = p.data();
if(typeof dd.toggle != 'undefined' && dd.toggle == 'dropdown')
this.closable = true;
else {
if(target.hasClass('dropdown-menu'))
this.closable = false;
else {
var pp = target.parent('.dropdown-menu');
if(typeof pp != 'undefined')
this.closable = false;
else
this.closable = true;
}
}
}
},
"hide.bs.dropdown": function(){return this.closable;}
});
在 .dropdown-menu 内单击后保持下拉列表打开状态
$(document.body).on({
"shown.bs.dropdown": function(){ this.closable = true; },
"hide.bs.dropdown": function(){ return this.closable; },
"click": function(e){ this.closable = !$(e.target).closest(".dropdown-menu").length; },
},".dropdown.keepopen");
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function(){
this.closable = true;
},
"hide.bs.dropdown": function(e){
if(!this.closable){
this.closable = true;
return false;
}
return this.closable;
},
"click": function(e){
this.closable = false;
}
});
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 无法使用国家/地区选择中的状态动态填充下拉列表
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- 保持元素处于禁用状态,直到未在 Angularjs 中选择下拉列表
- 刷新窗口后,下拉列表未保持选中状态
- 如何在禁用 JavaScript 的情况下维护下拉列表的持久性状态 - PHP
- 单击关闭时,使引导下拉列表保持打开状态
- 单个列筛选不保存下拉列表 jQuery 的状态
- 单击时使Zurb基金会下拉列表保持打开状态
- ASP.NET-在刷新页面后保持下拉列表中所选值的状态,而不使用viewstate和autopostback
- 检测html选择下拉列表是否处于下拉选择状态
- 我想在从下拉列表中选择其他选项时激活一个文本框,否则它将保持不活动状态
- 切换下拉列表保持打开状态
- 如何使动态下拉列表中的选定值保持选中状态
- Knockout JS级联状态/城市下拉列表(使用JSON)