解决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 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
四个PHP非常实用的功能
2015/09/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python 检查文件mime类型的方法
2018/12/08 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
大学团日活动新闻稿
2014/09/10 职场文书
离婚协议书范本2014
2014/10/27 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年资料员工作总结
2015/04/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
公司车队管理制度
2015/08/04 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python