目标:

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. wkhtmltopdfhtml php生成pdf快照,网页截图,网页快照完整版 (原)

    首先,安装(linux安装为例) 1.下载wkhtmltopdf wget http://download.gna.org/wkhtmltopdf/obsolete/linux/wkhtmltopdf ...

  2. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  3. 【Spark机器学习速成宝典】基础篇04数据类型(Python版)

    目录 Vector LabeledPoint Matrix 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策树 Python代码(sk ...

  4. sql server中 设置与查看锁的超时时间(ZT) @@LOCK_TIMEOUT

      在数据库的应用系统中,死锁是不可避免的.通过设置死锁的处理优先级方法,可以在数据库引擎中自动检测到死锁,对发生的死锁会话进行干预,从而达到解除死锁的目点,但在这种情况下,会话只能被动的等待数据库引 ...

  5. Python学习笔记:关于脚本文件中的 if __name__ = '__main__'

    这两天自己写了一个Python脚本文件,但是直接运行这个.py之后发现里面的函数并没有执行,参考别人的代码之后,发现原来要加入以下代码: if name == 'main': 函数名1 函数名2 .. ...

  6. wls应用命令部署与卸载

    1.查看wls节点运行状态 [root@localhost lib]# jps [root@localhost lib]# ss -tnlp|grep 23705 2.配置wls环境变量 [deplo ...

  7. js对数组分组处理

    一.js数组分组 1.js对数据分组类似group by 源码如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  8. 解决Oracle XE报错ORA-12516(oracle回话数超出限制)

    本地安装的oracleXEUniv—oracle特别版,免费用户可以自由使用,但有连接数量和存储限制. 最近遇到一个问题,当我的SSM项目连接本地数据库oracleXE后,我的navicat再连接时就 ...

  9. LaTex&&markdown

    LaTeX在线编辑器:传送门 LaTeX常用公式整理(转载):传送门 Markdown洛谷教程(转载):传送门 Markdown基本语法(转载):传送门 Markdown数学符号和语法(转载):传送门 ...

  10. Android Studio在Make Project时下载Grandle特别慢

    SDK下载完成了,建个工程, 又蒙了: Server returned HTTP response code: 502 for URL: https://services.gradle.org/dis ...