解决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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 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
xml+php动态载入与分页
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php中JSON的使用方法
2015/04/30 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python实现汉诺塔方法汇总
2016/07/25 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
会展中心部门工作职责
2013/11/27 职场文书
医学生自我评价
2014/01/27 职场文书
音乐教学案例
2014/01/30 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
计算机系本科生求职信
2014/05/31 职场文书
婚前协议书范本
2014/10/27 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL