取消Bootstrap的dropdown-menu点击默认关闭事件方法


Posted in Javascript onAugust 10, 2018

场景

我在一个div中生成的是一个多级列表,需要多次点击列表,找到对应的列表项,而Bootstrap默认在dropdown-menu中点击一次就会消失。

点击右侧的按钮,弹出一个多级列表

取消Bootstrap的dropdown-menu点击默认关闭事件方法

代码如下:

<div class="dropdown">
  <a href="#" rel="external nofollow" data-toggle="dropdown">
     <i class="fa fa-cog fa-2x"> </i>
  </a>
  <div class="dropdown-menu jq22-container">
     <div id="treeview" class=""></div>
  </div>
</div>

解决办法

第一步

在dropdown-menu中的需要处理的元素添加 data-stopPropagation=”true”,data-stopPropagation属性是用来对点击时停止传播事件,这样我们的点击事件就不会传播给Bootstrap.js中去了。

第二步

调用Bootstrap的stopPropagation()函数,可以阻止元素点击时停止传播事件。

我在我的代码中写的比较粗暴,对整个treeview声明一个click事件,并且全部绑定上stopPropagation()方法。

$(".treeview").on("click",function (e) {
  e.stopPropagation();
})

以上这篇取消Bootstrap的dropdown-menu点击默认关闭事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
JavaScript创建对象的常用方式总结
Aug 10 #Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 #Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 #Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 #Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 #Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 #Javascript
You might like
用PHP读注册表
2006/10/09 PHP
php 静态化实现代码
2009/03/20 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
对比分析json及XML
2014/11/28 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
Python中将字典转换为列表的方法
2016/09/21 Python
简单了解django缓存方式及配置
2019/07/19 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
欢迎领导标语
2014/06/27 职场文书
伏羲庙导游词
2015/02/09 职场文书
基层党支部承诺书
2015/04/30 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
英语导游欢迎词
2015/09/30 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers