解决bootstrap下拉菜单点击立即隐藏bug的方法


Posted in Javascript onJune 13, 2017

昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个div会立即隐藏,这就导致每次只能选一个。

解决bootstrap下拉菜单点击立即隐藏bug的方法

这应该是事件传播的原因,代码修改如下:

var banks = $('.all').siblings().children();
$('.all>input').click(function() {
  var flag = $(this).prop('checked');
  banks.prop('checked', flag);
})

// 阻止事件传播, 否则在点击复选框的时候,dropdown-menu这个div会立即隐藏
$('.dropdown-menu label').click(function(e) {
  e.stopPropagation();
});
banks.click(function() {
  // 如果有一个没选中,全选按钮不选中
  // 如果全部选中,全选按钮被选中
  var num = 0;
  banks.each(function() {
    if ($(this).prop("checked")) {
      num++;
    }
  })
  if (num == banks.length) {
    $('.all>input').prop('checked', true);
  } else {
    $('.all>input').prop('checked', false);
  }
})

另外,需要新增加的功能是,点击“保存”按钮的时候,需要把选中的银行名称以逗号拼接成字符串传递给后台。这部分比较简单,代码如下:

// 在提交时,获取选中的所有值,并把这些值拼接成字符串
$('.submit').click(function() {
  var bankArr = [];
  banks.each(function() {
    if ($(this).prop("checked")) {
      bankArr.push($(this).val());
    }
  });
  var bankStr = bankArr.join(',');
  console.log(bankStr);
})

解决bootstrap下拉菜单点击立即隐藏bug的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JS的数组迭代方法
Feb 05 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 #Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 #Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 #Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 #Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 #Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 #Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 #Javascript
You might like
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
解析php5配置使用pdo
2013/07/03 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP连接access数据库
2015/03/27 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Python变量和字符串详解
2017/04/29 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
python 制作网站小说下载器
2021/02/20 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
诉讼和解协议书
2016/03/23 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis