解决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 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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 date函数参数详解
2006/11/27 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python中random模块用法实例分析
2015/05/19 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
会计专业自我鉴定
2014/02/10 职场文书
平安工地汇报材料
2014/08/19 职场文书
校园安全广播稿范文
2014/09/25 职场文书