取消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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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
Terran兵种介绍
2020/03/14 星际争霸
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
微信小程序实现顶部导航特效
2019/01/28 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python实现跨文件全局变量的方法
2014/07/07 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python实现八皇后问题示例代码
2018/12/09 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
材料专业大学毕业生自荐书
2014/07/02 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
入党心得体会
2019/06/20 职场文书