目标:

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. 二分mid的取法

    二分的两种形式: 1.范围缩小时,r = mid,l = mid + 1,取中间值时,mid = (l + r) >> 1. 2.范围缩小时,l = mid,r = mid - 1,取中间 ...

  2. js下拉框选择图片

    二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写  下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...

  3. Spring boot之JPA/Hibernate/Spring Data

    1.什么是JPA? JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA(Java Per ...

  4. Java期末课程学习汇总。

    本学期面向对象与Java程序设计课程已经结束了,给自己学习来个总结. 本学期过的非常快,不得不说这一学期学到的东西很少,感觉自己的进步很小. 而且感觉自己总少了点什么,在写这篇总结前,我认真想了,很多 ...

  5. spark 笔记 14: spark中的delay scheduling实现

    延迟调度算法的实现是在TaskSetManager类中的,它通过将task存放在四个不同级别的hash表里,当有可用的资源时,resourceOffer函数的参数之一(maxLocality)就是这些 ...

  6. ggsci: error while loading shared libraries: libnnz11.so: cannot open shared object file

    完整的错误信息如下: ggsci: error while loading shared libraries: libnnz11.so: cannot open shared object file: ...

  7. iOS 图表工具charts之CombinedChartView

    关于charts的系列视图介绍传送门: iOS 图表工具charts介绍 iOS 图表工具charts之LineChartView iOS 图表工具charts之BarChartView iOS 图表 ...

  8. ASP.NET MVC 开发随笔(二)

    1.目前在局部视图中使用多个model时候,发现使用IEnumerable的时候,读取不了原来model的内容,所以采用List发现没问题 2. 如果想在JS中使用Razor,则需要在Razor添加& ...

  9. Java编程思想——标准 I / O

    将Syetem.out转换成PrintWriter 标准I/O重定向: 控制台信息量大,滚动快,查看困难 setIn(InputStream) setOut(...) setErr(...) 新I/O ...

  10. TCP/IP笔记——TCP特点、首部格式、滑动窗口

    这次总结一下TCP相关的知识. TCP主要特点 面向连接:在通信前必须建立连接(只是逻辑上存在,而不是物理连接) 只能有两个端点:即只能一对一通信(所以通常p2p是用UDP实现的) 提供可靠交付服务: ...