解决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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
js中数组的常用方法小结
Dec 30 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
extract-text-webpack-plugin用法详解
Feb 14 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
解析vue中的$mount
2017/12/21 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
详解js类型判断
2018/05/22 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python多进程操作实例
2014/11/21 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python如何输出整数
2020/06/07 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
致接力运动员广播稿
2014/02/17 职场文书
春季防火方案
2014/05/10 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android