解决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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
js实现图片实时时钟
Jan 15 Javascript
浅谈react路由传参的几种方式
Mar 23 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
浅析Python编写函数装饰器
2016/03/18 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
城市规划毕业生求职信
2013/10/10 职场文书
英文演讲稿
2014/05/15 职场文书
小学生读书活动总结
2014/06/30 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2014年林业工作总结
2014/12/05 职场文书
学习党史心得体会2016
2016/01/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书