Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标:
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插件显示下拉列表,点击下拉列表区域,不会再自动关闭。的更多相关文章
- yii2.0使用bootstrap中日期插件
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...
- Bootstrap 中的插件的学习2(导航)
实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href=" ...
- Bootstrap中data-src无法显示图片,但是src可以
在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片:data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src ...
- Bootstrap 避免模态框在用户点击背景空白处时,会自动关闭。
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...
- bootstrap datepicker时间插件显示位置不对
bppystrap-datetimepicker.min.js中,修改如下:将原来的 if(!b(this.element)){l=l+document.body.scrollTop}改 ...
- 12、Bootstrap中文文档(其它插件分享)
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
- bootstrap中对dropdown使用hover代替click
bootstrap的下拉组件需要点击click才能展示下拉列表,这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题. 在VS的Nuget中查询bootstrap-hover-dropdown ...
随机推荐
- NOI数论姿势瞎总结(Pi也没有)
Miller-Rabin素数检测 费马小定理:没人不会吧. 二次探测:如果\(n\)是质数,\(x^2 \equiv 1\ (\mod n)\)的解只有\(x \equiv 1\)或\(x \equi ...
- [CF1172E]Nauuo and ODT:Link-Cut Tree
分析 lxl大毒瘤. 感谢Ouuan等CNOIER提供了这么好的比赛. 这里只是把官方题解复述一遍,可以直接去看官方题解:点我. 考虑将问题转化为对于每个颜色,求出没有经过这个颜色的节点的路径有多少条 ...
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 6、kubernetes资源清单之Pod控制器190714
一.Pod控制器的类别 ReplicationController:早期唯一的控制器,已废弃 ReplicaSet:控制Pod满足用户期望副本:标签选择器选择由自己管理的Pod副本:Pod资源模板完成 ...
- vscode 配置go环境 可调试
1.go下载安装并配置环境变量 2.安装工具: 1)安装gocode go get -u -v github.com/nsf/gocode 2)安装godef go get -u -v githu ...
- Linux高级调试与优化——内存管理
1.物理地址和虚拟地址 Linux采用页表机制管理内存,32位系统中页大小一般为4KB,物理内存被划分为连续的页,每一个页都有一个唯一的页号. 为了程序的的可移植性,进程往往需要运行在flat mem ...
- TCP keepalive的详解(解惑)
TCP是面向连接的,一般情况,两端的应用程序可以通过发送和接收数据得知对端的存活. 当两端的应用程序都没有数据发送和接收时,如何判断连接是否正常呢? 这就是SO_KEEPALIVE的作用. 1. SO ...
- 浏览器端-W3School-HTML:HTML DOM Area 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Area 对象 1.返回顶部 1. HTML DOM Area 对象 Area 对象 Area 对象代表图像映射的一个区域(图像 ...
- 多变量线性回归时使用梯度下降(Gradient Descent)求最小值的注意事项
梯度下降是回归问题中求cost function最小值的有效方法,对大数据量的训练集而言,其效果要 好于非迭代的normal equation方法. 在将其用于多变量回归时,有两个问题要注意,否则会导 ...
- 【工具】rinetd 使用教程(linux 下的端口转发工具 )
日期:2019-07-30 20:00:36 更新: 作者:Bay0net 介绍:使用 rinetd 来转发某端口的流量. 0x01. 安装 官网 RINETD 安装方法很简单,一条语句就 OK 了. ...