解决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 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
PHP 采集程序 常用函数
2008/12/18 PHP
php MYSQL 数据备份类
2009/06/19 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
javascript call和apply方法
2008/11/24 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
幼儿园小班评语
2014/04/18 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
大学三年计划书范文
2014/04/30 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
车队安全员岗位职责
2015/02/15 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
一文搞懂Java中的注解和反射
2022/06/21 Java/Android