解决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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
如何快速上手Vuex
Feb 14 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
js实现简单页面全屏
Sep 17 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python thread 并发且顺序运行示例
2009/04/09 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
学校岗位设置方案
2014/01/16 职场文书
法定代表人授权委托书
2014/04/04 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
要账委托书范本
2014/09/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
出差报告格式模板
2014/11/06 职场文书
党风廉正建设责任书
2015/01/29 职场文书
思想工作总结范文
2015/08/12 职场文书