目标:

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. js添加删除class

    添加: obj.classList.add("active"); 删除:obj.classList.remove("active");例子 <button ...

  2. Oracle提高SQL查询效率where语句条件的先后次序

    (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处 ...

  3. 分布式-信息方式-ActiveMQ的Destination高级特性1

    ActiveMQ的Destination高级特性 Destination高级特性----->Composite Destinations 组合队列Composite Destinations : ...

  4. Linux上python3的安装和使用

    centos7默认是装有python的,咱们先看一下 #检查python版本 [root@oldboy_python ~ 17:23:54]#python -V Python 2.7.5 但是 pyt ...

  5. Mysql和Orcale的区别

    有很多应用项目, 刚起步的时候用MYSQL数据库基本上能实现各种功能需求,随着应用用户的增多,数据量的增加,MYSQL渐渐地出现不堪重负的情况:连接很慢甚至宕机,于是就有把数据从MYSQL迁到ORAC ...

  6. spark MLlib 概念 4: 协同过滤(CF)

    1. 定义 协同过滤(Collaborative Filtering)有狭义和广义两种意义: 广义协同过滤:对来源不同的数据,根据他们的共同点做过滤处理. Collaborative filterin ...

  7. DB2基础维护手册

    诊断DB2系统性能:db2top -d DEMODB db2top详解:http://blog.sina.com.cn/s/blog_636d62310102v7lm.html

  8. SpringBoot深入了解

    核心配置文件 application 配置文件,主要用于 Spring Boot 项目的自动化配置. bootstrap 配置文件有以下几个应用场景. 使用 Spring Cloud Config 配 ...

  9. 使用多个梯度下降的方式进行测试,同时使用ops.apply_gradient进行梯度的下降

    1. ops = tf.train.GradientDescentOptimizer(learning_rate) 构建优化器 参数说明:learning_rate 表示输入的学习率 2.ops.co ...

  10. [转] JavaScript学习:BOM和DOM的区别和关联

    BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系 ...