解决bootstrap中下拉菜单点击后不关闭的问题


Posted in Javascript onAugust 10, 2018

bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下:

解决bootstrap中下拉菜单点击后不关闭的问题

解决方法:

指定要操作的元素的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中下拉菜单点击后不关闭的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js传值 判断
Oct 26 Javascript
AJAX架构之Dojo篇
Apr 10 Javascript
用js实现的页面关键字密度查询代码
Dec 27 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
小程序实现发表评论功能
Jul 06 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 #Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 #Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 #Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 #Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 #Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript call和apply方法
2008/11/24 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
axios学习教程全攻略
2017/03/26 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
python列表去重的二种方法
2014/02/14 Python
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
实验教师岗位职责
2014/02/13 职场文书
股东协议书
2014/04/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书