目标:

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. 转载:tcp详解

    TCP详解 转自:http://www.cnblogs.com/kzloser/articles/2582957.html 首部格式 图释: 各个段位说明: 源端口和目的端口: 各占 2 字节.端口是 ...

  2. Spring Boot教程(二十七)整合Spring Security

    在这一节,我们将对/hello页面进行权限控制,必须是授权用户才能访问.当没有权限的用户访问后,跳转到登录页面. 添加依赖 在pom.xml中添加如下配置,引入对Spring Security的依赖. ...

  3. ajax报告申请添加

    function reportApplyAddFun(){ $("#dlg").dialog("open").dialog("center" ...

  4. C++入门经典-例3.3-if-else语句的奇偶性判别

    1:代码如下: // 3.3.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  5. SpringBoot 使用定时任务动态执行任务

    import com.patient.core.adapter.CorsFilter; import org.mybatis.spring.annotation.MapperScan; import ...

  6. 浏览器端-W3School-浏览器端:JavaScript Array 对象

    ylbtech-浏览器端-W3School-浏览器端:JavaScript Array 对象 1.返回顶部 1. Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对 ...

  7. Ubuntu下查找nginx日志

    使用awk检测nginx日志, 按小时计数 awk '{split($4,array,"[");if(array[2]>="29/May/2016:00:00:26 ...

  8. nginx禁止指定的user_agent访问

    #禁止指定user_agent(浏览器标识)if ($http_user_agent ~ 'curl|baidu'){ return 403;} if ($http_user_agent ~* 'cu ...

  9. 关于函数中参数kwarg.setdefault()的用法

    1.kwarg.setdefault() setdefault()是给字典传递一个默认值    当给字典传递数据时 setdefault()是字典默认的一个参数,当有新的数据时,就会使用新的数据

  10. Java学习之==>JDBC

    一.概述 官方解释: JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的 Java API,可以为多种关系型数据库提供统一访问,它由一组用 ...