解决bootstrap中下拉菜单点击后不关闭的问题
bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下:
解决方法:
指定要操作的元素的click事件停止传播—定义属性值data-stopPropagation的元素点击时停止传播事件
//下拉框查询组件点击查询栏时不关闭下拉框 $("body").on('click','[data-stopPropagation]',function (e) { e.stopPropagation(); });
之后在你需要点击不关闭的标签下加上该属性data-stopPropagation=”true”即可。
<div class="supplier_search_category dropdown-header" id="supplier_search_li" data-stopPropagation="true"> 查询:<input type="text" id="category_search_text" class="search_text"/> </div>
以上这篇解决bootstrap中下拉菜单点击后不关闭的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Bootstrap导航菜单点击后无法自动添加active的处理方法
Bootstrap提供了很丰富的前后端框架,为不精通CSS的程序猿们提供了很大的便利.前段时间在使用Bootstrap中的菜单控件时,其中的链接点击后,无法自动添加active类,即无法自动激活.需要适当做如下处理才OK. 废话说了,直接上代码: <ul class="tabbable faq-tabbable"> <li class="active"><a href="@Url.Action(" rel="
-
解决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的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog
-
解决bootstrap中下拉菜单点击后不关闭的问题
bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下: 解决方法: 指定要操作的元素的click事件停止传播-定义属性值data-stopPropagation的元素点击时停止传播事件 //下拉框查询组件点击查询栏时不关闭下拉框 $("body").on('click','[data-s
-
快速解决bootstrap下拉菜单无法隐藏的问题
下拉菜单的两种实现 想必大家都知道,bootstrap为我们提供了一个下拉菜单的组件,官方也为我们提供两种使用方法 1.标签指定data-toggle <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
-
Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法. 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css: 复制代码 代码如下: .nav > li:hover .dropdown-menu {display: block;} 这句css加在bootstrap.min.css之后出现的css中,你试下! 缺点: 1.相应的顶级菜单不可点击 2.鼠标滑到二级菜单后,顶级菜
-
JS模拟bootstrap下拉菜单效果实例
本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的
-
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="
-
解决element-ui中下拉菜单子选项click事件不触发的问题
将@click改为@click.native='logoutHandle';即可监听选项的点击事件. <el-dropdown class="pull-right" > <span class="el-dropdown-link"> <img src="./img/header.jpg" alt="" class="pull-right"> </span> &
-
第八篇Bootstrap下拉菜单实例代码
先给大家说下我的实现思路:给div一个class "dropdown",将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="drop
-
Bootstrap布局组件教程之Bootstrap下拉菜单
本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>
-
Bootstrap下拉菜单样式
本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
随机推荐
- jQuery简单实现禁用右键菜单
- JQuery fileupload插件实现文件上传功能
- Java BigDecimal详解_动力节点Java学院整理
- IOS多线程编程的3种实现方法
- Javabean和map相互转化方法代码示例
- asp.net GridView控件中实现全选的解决方案
- php禁止直接从浏览器输入地址访问.php文件的方法
- 详解A标签中href=""的几种用法
- Android中使用am命令实现在命令行启动程序详解
- MySql用DATE_FORMAT截取DateTime字段的日期值
- 闭合浮动元素超级简单的方法
- Mongodb自增id实现方法
- 深入理解require与require_once与include以及include_once的区别
- 零基础写Java知乎爬虫之准备工作
- Eval 函数 | Execute 语句 | ExecuteGlobal 语句使用说明
- 轻轻松松双机互联
- 安全全方位路由器安全相关的目录
- java实现一个简单的网络爬虫代码示例
- Django REST为文件属性输出完整URL的方法
- 简单实现Android闹钟功能