解决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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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常用函数汇总
2014/12/17 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
详解php中 === 的使用
2016/10/24 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
React Router基础使用
2017/01/17 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS实现星星海特效
2019/12/24 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
python中类的属性和方法介绍
2018/11/27 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
django url到views参数传递的实例
2019/07/19 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
年度考核自我评价
2014/01/25 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
以权谋私检举信范文
2015/03/02 职场文书
返乡农民工证明
2015/06/24 职场文书
小学校本教研总结
2015/08/13 职场文书
Python基础知识学习之类的继承
2021/05/31 Python