取消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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
document.getElementById介绍
2011/09/13 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python压缩和解压缩zip文件
2015/02/14 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
义诊活动总结
2015/02/04 职场文书
自书遗嘱范文
2015/08/07 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS