解决bootstrap下拉菜单点击立即隐藏bug的方法
网络编程 2021-07-04 18:32www.168986.cn编程入门
本篇文章主要介绍了解决bootstrap下拉菜单点击立即隐藏bug的方法,具有一定的参考价值,有兴趣的可以了解一下
昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个div会立即隐藏,这就导致每次只能选一个。
这应该是事件传播的原因,代码修改如下
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.sPropagation(); }); 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); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程