解决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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
详谈js模块化规范
Jul 07 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
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动态图像的创建
2006/10/09 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
javascript自执行函数
2017/02/10 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python读写csv文件的方法
2019/08/13 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
车间班长岗位职责
2013/11/30 职场文书
应急管理培训方案
2014/06/12 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python