bootstrap下拉菜单点击立即隐藏改如何解决-tutorial js-php.cn

bootstrap下拉菜单点击立即隐藏改如何解决

零下一度

Lepaskan： 2017-06-15 13:30:48

asal

1463 orang telah melayarinya

本篇文章主要介绍了解决bootstrap下拉菜单点击立即隐藏bug的方法，具有一定的参考价值，有兴趣的可以了解一下

昨天用jQuery和bootstrap实现下拉菜单复选框，今天把做好的demo组合进项目里，发现有点bug，就是点击银行复选框的时候，每点一次dropdown-menu这个p会立即隐藏，这就导致每次只能选一个。

这应该是事件传播的原因，代码修改如下：

var banks = $(&#39;.all&#39;).siblings().children();
$(&#39;.all>input&#39;).click(function() {
  var flag = $(this).prop(&#39;checked&#39;);
  banks.prop(&#39;checked&#39;, flag);
})

// 阻止事件传播, 否则在点击复选框的时候，dropdown-menu这个p会立即隐藏
$(&#39;.dropdown-menu label&#39;).click(function(e) {
  e.stopPropagation();
});
banks.click(function() {
  // 如果有一个没选中，全选按钮不选中
  // 如果全部选中，全选按钮被选中
  var num = 0;
  banks.each(function() {
    if ($(this).prop("checked")) {
      num++;
    }
  })
  if (num == banks.length) {
    $(&#39;.all>input&#39;).prop(&#39;checked&#39;, true);
  } else {
    $(&#39;.all>input&#39;).prop(&#39;checked&#39;, false);
  }
})

Salin selepas log masuk

另外，需要新增加的功能是，点击“保存”按钮的时候，需要把选中的银行名称以逗号拼接成字符串传递给后台。这部分比较简单，代码如下：

// 在提交时，获取选中的所有值，并把这些值拼接成字符串
$(&#39;.submit&#39;).click(function() {
  var bankArr = [];
  banks.each(function() {
    if ($(this).prop("checked")) {
      bankArr.push($(this).val());
    }
  });
  var bankStr = bankArr.join(&#39;,&#39;);
  console.log(bankStr);
})

Salin selepas log masuk

Atas ialah kandungan terperinci bootstrap下拉菜单点击立即隐藏改如何解决. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!