Bootstrap 下拉菜单(Dropdown)插件取消下拉框默认点击隐藏
Bootstrap 下拉菜单(Dropdown)插件,下拉框取消默认点击下拉框内区块隐藏。有的时候我们不希望点击下拉框的内容后,下拉框就隐藏。比如,如果下拉框内容是一个列表之类的话,当我们点开列表后下拉框就隐藏了,而此时我们还没有选择我们要选择的元素。
基于这种情况,我们需要对下拉框进行更多的控制。
我们整体的结构可能是这样的:
<div>
<div><div class="dropdown-menu w-xl animated fadeInUp"></div>
<div><div class="panel bg-white"></div>
<div></div>
<div><div class="list-group"style="max-height: 400px; overflow-y: scroll; overflow-x: hidden;"></div>
<div><div class="list-group-item"></div>
<div>......</div>
</div>
取消下拉框默认点击隐藏的方法:
/**dropdown取消默认点击隐藏 */
$(".dropdown-menu").click(function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
取消了所有的元素点击事件,如此一来当我们点击下拉框列表中的任何内容下拉框都不会隐藏了,除非我们点击外部元素或者点击button。