取消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点击默认关闭事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决bootstrap下拉菜单点击立即隐藏bug的方法

    解决bootstrap下拉菜单点击立即隐藏bug的方法

    昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个div会立即隐藏,这就导致每次只能选一个. 这应该是事件传播的原因,代码修改如下: var banks = $('.all').siblings().children(); $('.all>input').click(function() { var flag = $(this).prop('checked'); banks.

  • 解决bootstrap中下拉菜单点击后不关闭的问题

    bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下: 解决方法: 指定要操作的元素的click事件停止传播-定义属性值data-stopPropagation的元素点击时停止传播事件 //下拉框查询组件点击查询栏时不关闭下拉框 $("body").on('click','[data-s

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

    场景 我在一个div中生成的是一个多级列表,需要多次点击列表,找到对应的列表项,而Bootstrap默认在dropdown-menu中点击一次就会消失. 点击右侧的按钮,弹出一个多级列表 代码如下: <div class="dropdown"> <a href="#" rel="external nofollow" data-toggle="dropdown"> <i class="fa

  • Bootstrap 模态框自定义点击和关闭事件详解

    模态框避免点击背景处关闭: 1.div初始化时添加属性 aria-hidden="true" data-backdrop="static" <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden='true'

  • layui中的tab控件点击切换触发事件

    layui中的tab控件点击切换触发事件

    目录 tab控件点击切换触发事件 方法一 方法二 layui选项卡无法切换 解决 tab控件点击切换触发事件 在layui中使用到tab控件,如果不想在页面加载时就加载所有tab的界面,而是点击某个tab再加载对应的数据,可以使用tab 的点击事件. 方法一 这个方法是我最初在网上找的使用方法. 非IE浏览器 //切换tab 调用不同的方法 layui.use('element', function(){ var $ = jQuery = layui.jquery; var element =

  • bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap如何让dropdown menu按钮式下拉框长度一致

    bootstrap框架提供了下拉菜单组件(dropdown),即点击一个元素或按钮,触发隐藏的列表显示出来. 1.基本代码和页面展示 按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效.对于菜单部分,设置 class="dropdown-menu"才能 自动隐藏并添加固定样式.设置 class="caret"表示箭头,可上可下. <div class=&qu

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="

  • 解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

    最近小编在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述:使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:error:Bootstrap dropdown require Popper.js bootstrap代码(只要是含dropdown部件的都可以啦)为: <ul class="nav nav-tabs"> <li class="nav-ite

  • 表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹 <label for="label-input"> <input type="text" class="" id="label-input"><br> <button>button</button> </label> 在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,labe

  • Bootstrap modal使用及点击外部不消失的解决方法

    本文实例为大家分享了Bootstrap modal使用及点击外部不消失的解决方法,供大家参考,具体内容如下 1.代码: <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/&g

  • jquery点击回车键实现登录效果并默认焦点的方法

    最近在做项目登录时,每次都需要点击登录按钮才可以进入相应的页面,给用户一个很不好的体验,所以我就添加使用回车键来实现登录. 方法: <form> <input type="text" id="username_txt" placeholder="用户名" /> <input type="password" id="userpass_txt" placeholder="

随机推荐