取消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中几种常见排序算法小结
Feb 22 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
js自制图片放大镜功能
Jan 24 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
linux下python抓屏实现方法
2015/05/22 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python连接phoenix的方法示例
2017/09/29 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
学历公证书范本
2014/04/09 职场文书
市场推广策划方案
2014/06/02 职场文书
银行求职自荐书
2014/06/25 职场文书
会计求职自荐信
2015/03/26 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript