取消Bootstrap的dropdown-menu点击默认关闭事件方法
更新时间：2018年08月10日 10:47:39 作者：leehzl
今天小编就为大家分享一篇取消Bootstrap的dropdown-menu点击默认关闭事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
场景
我在一个div中生成的是一个多级列表，需要多次点击列表，找到对应的列表项，而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点击默认关闭事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Javascript中实现trim()函数的两种方法,本文直接给出实现代码和使用方法,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了js实现tab栏切换制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了package.json中homepage属性的作用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本篇文章主要是对js字符串转换成数字与数字转换成字符串的实现方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
JavaScript中常用数据处理函数groupBy的用法详解
数据处理与分析中,对数据进行分组是非常常见的功能,不论是实际工作中,还是在面试的场景中应用十分广泛,尤其在函数式编程中 groupBy 十分常见,下面我们就来学习一下groupBy的用法吧2023-12-12
这篇文章主要介绍了JS ES6异步解决方案，对异步感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了详解浏览器渲染页面过程的相关资料,需要的朋友可以参考下2017-02-02
在学习的时候，有时候看到一些一些网站的图片是经过压缩处理的，因为压缩之后的图片会节省一部分你的内存空间，这样的话也可以提升性能，于是就比较好奇这是如何实现的，今天我们就简单的实现一下,需要的朋友可以参考下2023-06-06
bootstrap datetimepicker日期插件超详细使用方法介绍
本篇文章主要介绍了bootstrap datetimepicker日期插件超详细使用方法介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论