Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标:
Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
参考:http://v3.bootcss.com/javascript/#dropdowns //
http://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off
实现方法:判断点击发生在下拉列表区域,阻止向上冒泡事件。这样在点击其他区域时,也能够自动关闭该下拉列表区域。
<script>
$(function () {
$(".dropdown-menu").on('click', function (e) {
e.stopPropagation();
}); });
</script>
Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。的更多相关文章
- yii2.0使用bootstrap中日期插件
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...
- Bootstrap 中的插件的学习2(导航)
实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href=" ...
- Bootstrap中data-src无法显示图片,但是src可以
在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片:data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src ...
- Bootstrap 避免模态框在用户点击背景空白处时,会自动关闭。
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...
- bootstrap datepicker时间插件显示位置不对
bppystrap-datetimepicker.min.js中,修改如下:将原来的 if(!b(this.element)){l=l+document.body.scrollTop}改 ...
- 12、Bootstrap中文文档(其它插件分享)
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
- bootstrap中对dropdown使用hover代替click
bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...
随机推荐
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
- C++入门经典-例5.12-动态内存的销毁
1:当申请一块堆内存后,系统不会再程序执行时一句情况自动销毁它.若想释放该内存,则需要使用delete关键字.下面的代码中,可以看出堆和栈的不同.代码如下: // 5.12.cpp : 定义控制台应用 ...
- AES加密算法在Linux下出现随机加密结果
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- spring的AOP基本原理
一.什么是AOP AOP(Aspect Oriented Programming),意思是面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP基于IoC基础,是对OOP ...
- 使用FFmpeg让mp4转gif
配好环境之后,需要在开始菜单中打开命令提示符,然后进入到test.mp4的文件目录下执行命令.(直接在文件目录下打开cmd不能生效)ffmpeg -i test.mp4 -f gif test.gif
- UVa 839 -- Not so Mobile(树的递归输入)
UVa 839 Not so Mobile(树的递归输入) 判断一个树状天平是否平衡,每个测试样例每行4个数 wl,dl,wr,dr,当wl*dl=wr*dr时,视为这个天平平衡,当wl或wr等于0是 ...
- flutter 添加全局环境变量
flutter安装好了之后 要添加全局环境变量才可以在终端通过flutter命令来操作 安装flutter环境变量 vim ~/.bash_profile (不存在就创建,添加下面一行命令) expo ...
- MySQL orzdba、dodba、top、iostat、vmstat、perf等
1 mysq自带的mysqladmin命令 mysqladmin -usystem -p*** -h127.0.0.1 -P3306 -r -i 1 extended-status \ |grep & ...
- React-Native中props用法详解
props就是属性,是为了描述一个组件的特征而存在的.它是父组件传递给子组件的. 使用props 通过上一个页面传递 新建一个 PropsTest.js 文件 1 2 3 4 5 exprot def ...
- poatman接口测试--初试
接到测试任务,对两个商品接口,进行接口测试 测试工具:postman 域名:rap2查找的或询问开发, 接口的参数规则:参考rap2的备注 开发没有添加详细说明的,让开发补充说明规则,及定义的返回状态 ...