目标:

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插件显示下拉列表,点击下拉列表区域,不会再自动关闭。的更多相关文章

  1. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  2. Bootstrap 中的插件的学习2(导航)

    实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href=" ...

  3. Bootstrap中data-src无法显示图片,但是src可以

    在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片:data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src ...

  4. Bootstrap 避免模态框在用户点击背景空白处时,会自动关闭。

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  5. Bootstrap 中的插件的学习

    一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...

  6. datetimepicker bootstrap的时间插件显示位置问题及其他配置

    位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...

  7. bootstrap datepicker时间插件显示位置不对

    bppystrap-datetimepicker.min.js中,修改如下:将原来的        if(!b(this.element)){l=l+document.body.scrollTop}改 ...

  8. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  9. bootstrap中对dropdown使用hover代替click

    bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...

随机推荐

  1. ACM技能表

    看看就好了(滑稽) 数据结构 栈 栈 单调栈 队列 一般队列 优先队列/单调队列 循环队列 双端队列 链表 一般链表 循环链表 双向链表 块状链表 十字链表 邻接表/邻接矩阵 邻接表 邻接多重表 Ha ...

  2. 品 SpringBootApplication 注解源码

    @SpringBootApplication 由以下三个注解构成: @SpringBootConfiguration@EnableAutoConfiguration@ComponentScan 一:@ ...

  3. Java实现QQ微信轰炸机1.2(斗图乞丐版)

    之前有小可爱评论可以实现斗图的功能,原理上是行的通的,所以我就稍微改了一下,能够实现单个图片循环轰炸,如果大家感兴趣也可以自己探究实现多张图片循环轰炸,不废话了,直接上源码package QQWcha ...

  4. 使用ElementUI创建项目

    从 0 开始搭建 element 项目 第一步,安装 Nodejs/NPM https://nodejs.org/zh-cn/download/ 下载安装即可! 第二步,安装 vue-cli 打开 c ...

  5. 【学习】SpringBoot之简介、特点、缺点、应用场景

    Spring Boot 的介绍 SpringBoot的目的在于创建和启动新的基于Spring框架的项目.Spring Boot 会选择最合适的Spring子项目和第三方开源库进行整合.大部分Sprin ...

  6. 排序算法总结(java实现)

    排序算法 介绍:排序分为内部排序和外部排序,内部排序指在内存中进行的排序过程:外部排序指在外存中进行排序的过程,但是此过程建立在多次访问内存的基础上(分成一段段利用内部排序进行排序). 以下排序均属于 ...

  7. 解决cron不执行的问题

    在FreeBSD5.4下面做开发,需要定期备份mysql数据,开始在网上找了bash的脚本,但是执行无效,一怒之下,使用php来写,嘿嘿,其实php写脚本也不错滴.备份其实就是把mysql的数据库文件 ...

  8. UVA 816 -- Abbott's Revenge(BFS求最短路)

     UVA 816 -- Abbott's Revenge(BFS求最短路) 有一个 9 * 9 的交叉点的迷宫. 输入起点, 离开起点时的朝向和终点, 求最短路(多解时任意一个输出即可).进入一个交叉 ...

  9. ajaxfrom 和ajaxgird的区别

    ajaxfrom 和ajaxgird区别ajaxfrom适合单条数据,主要是用来显示主表的信息<hy:ajaxform2 id="ajaxform" name="d ...

  10. leetcode 297二叉树的序列化与反序列化

    to_string(x) 将数字x转化为string atoi(x) 将char转化为int stoi(x) 将string 转化为int 采用中序遍历的顺序存储,NULL用#表示,以,分隔,O(n) ...