解决bootstrap中下拉菜单点击后不关闭的问题
更新时间：2018年08月10日 10:37:40 作者：coding_forever
今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了，这显然达不到很多用户需求，如何实现当点击需要点击的地方后才关闭下拉框呢，下面来简单介绍下方法，比如要做一个下拉框筛选查询，下拉菜单展示图如下：
解决方法：
指定要操作的元素的click事件停止传播—定义属性值data-stopPropagation的元素点击时停止传播事件
//下拉框查询组件点击查询栏时不关闭下拉框
$("body").on('click','[data-stopPropagation]',function (e) {
e.stopPropagation();
});
之后在你需要点击不关闭的标签下加上该属性data-stopPropagation=”true”即可。
<div class="supplier_search_category dropdown-header" id="supplier_search_li" data-stopPropagation="true"> 查询：<input type="text" id="category_search_text" class="search_text"/> </div>
以上这篇解决bootstrap中下拉菜单点击后不关闭的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ECMAScript 6即将带给我们新的数组操作方法前瞻,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了js实现格式化金额,字符,时间的方法,实例分析了javascript转换金额、字符、日期等的常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js检查是否关闭浏览器的方法,涉及javascript针对窗口事件的判定与操作相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了基于Fixed定位的框选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了javascript中eval和with用法,结合实例形式总结分析了JavaScript中eval和with的功能、用法与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要给大家介绍了PHP中pathinfo()函数导致的安全问题,文中给出了详细的介绍与示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，需要的朋友可以参考下，下面来一起看看吧。2017-01-01
这篇文章主要介绍了mustache.js实现首页元件动态渲染的示例代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处，下面是具体的实现，需要的朋友不要错过2014-07-07
首先新建一个空列表，用于保存已排序的有序数列（我们称之为"有序列表"）。从原数列中取出一个数，将其插入"有序列表"中，使其仍旧保持有序状态。2011-07-07
JavaScript安全加密之禁止别人调试自己的前端页面代码实现
这篇文章主要为大家介绍了JavaScript安全加密之如何禁止别人调试自己的前端页面代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论