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>
时间: 2024-10-28 16:29:53

Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。的相关文章

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

实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" > <script src="/scripts/jquery.min.js"></script> <script src=&q

解决select2在bootstrap的modal中默认不显示的问题

在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: <style> /*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/ .select2-drop { z-index: 10050 !important; } .select2-search-choice-close { margin-top: 0 !import

好用的bootstrap中的时间插件-bootstrap-datepicker

bootstrap-datepicker是bootstrap中一款好用的时间插件,支持中文,支持时间段的选择,支持时间格式配置,在线示例中用法提供友好. 点击页面上的配置,右下角的代码同步更新. 1.下载bootstrap-datepicker中放在bootstrap文件夹. 在页面进行css引用 <link rel="stylesheet" href="bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.m

bootstrap 下拉菜单(dropdown)插件

使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-toggle="dropdown"来切换下拉菜单. <div class="dropdown"> <a href="#" data-toggle="dropdown">下拉菜单触发器</a> &l

玩转Bootstrap(JS插件篇)

模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使用如下(或见右侧代码编辑器28-29行): <!-导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js&qu

Bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc

Bootstrap Paginator分页插件使用示例

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载: https://github.com/lyonlai/bootstrap-paginator 首先视图的上面应该需要引入js和css文件,主要

bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safari浏览器中无法弹出浮动层,bug导致原因未知,官方demo也是如此. 解决方案 最后反复试验,发现一种解决方案,非常简单,即在给按钮绑定鼠标事件,然后手动触发dom的focus事件,也就连带触发了popover插件的显示事件. var $btn=$(".btn"); $btn.mouse

项目中jquery插件ztree使用记录

最近公司要求做一个关于后台的管理系统.在这个mvvm模式横行的年代,虽然这里用jquery做项目可能有点不符合时代的潮流,但是管他呢,能做出来先在说呗(公司以后要改用angular或者vue来统一前端的制作方式),个人觉得jquery还挺好用的.废话这里就不多叙述了.下面就先来一张完成后的图片展示一下ztree可以完成的功能. 额····这边弹出层的阴影是录制软件的问题(这边的前端插件用的是layui,想用的小伙伴可以自行百度layui,顺便一提,我这里用的版本是layui 1.0的,现在lay