解决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代码的信息监听示例
Apr 02 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
微信小程序选择图片控件
Jan 19 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js转义字符介绍
2013/11/05 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python最长公共子串算法实例
2015/03/07 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
django Admin文档生成器使用详解
2019/07/22 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
UDP协议功能
2013/01/06 面试题
《十六年前的回忆》教学反思
2014/02/14 职场文书
特教教师先进事迹
2014/05/21 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
副总经理岗位职责范本
2015/04/08 职场文书