解决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.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);
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • Bootstrap按钮下拉菜单组件详解

    Bootstrap按钮下拉菜单组件详解

    按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">

  • Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单

    本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery.ajax.springMVC等等知识点,可谓包罗万象! 首先,请允许我代表该自定义组件做一番小小的介绍. "hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的.我

  • Bootstrap每天必学之下拉菜单

    Bootstrap每天必学之下拉菜单

    一.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.sass ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

  • Bootstrap下拉菜单效果实例代码分享

    Bootstrap下拉菜单效果实例代码分享

    下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种. Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站. 对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释. 而且,官方网站的超级链接代码杂糅着许多没有用的参数. 笔者

  • Bootstrap实现下拉菜单效果

    Bootstrap实现下拉菜单效果

    下拉菜单用于显示链接列表的可切换.有上下文的菜单. 1.案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码. <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> D

  • 学习Bootstrap组件之下拉菜单

    学习Bootstrap组件之下拉菜单

    Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画. .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-men

  • Bootstrap3多级下拉菜单

    Bootstrap3多级下拉菜单

    本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <link rel="stylesheet" href="~/Conten

  • 解决bootstrap下拉菜单点击立即隐藏bug的方法

    解决bootstrap下拉菜单点击立即隐藏bug的方法

    昨天用jQuery和bootstrap实现下拉菜单复选框,今天把做好的demo组合进项目里,发现有点bug,就是点击银行复选框的时候,每点一次dropdown-menu这个div会立即隐藏,这就导致每次只能选一个. 这应该是事件传播的原因,代码修改如下: var banks = $('.all').siblings().children(); $('.all>input').click(function() { var flag = $(this).prop('checked'); banks.

  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="

  • 快速解决bootstrap下拉菜单无法隐藏的问题

    下拉菜单的两种实现 想必大家都知道,bootstrap为我们提供了一个下拉菜单的组件,官方也为我们提供两种使用方法 1.标签指定data-toggle <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题

  • Bootstrap下拉菜单更改为悬停(hover)触发的方法

    Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化.下面是实现方式: <!DOCTYPE html> <html> <head> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src=&quo

  • JS模拟bootstrap下拉菜单效果实例

    本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

  • 解决bootstrap中下拉菜单点击后不关闭的问题

    bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了,这显然达不到很多用户需求,如何实现当点击需要点击的地方后才关闭下拉框呢,下面来简单介绍下方法,比如要做一个下拉框筛选查询,下拉菜单展示图如下: 解决方法: 指定要操作的元素的click事件停止传播-定义属性值data-stopPropagation的元素点击时停止传播事件 //下拉框查询组件点击查询栏时不关闭下拉框 $("body").on('click','[data-s

  • 第八篇Bootstrap下拉菜单实例代码

    第八篇Bootstrap下拉菜单实例代码

    先给大家说下我的实现思路:给div一个class "dropdown",将下拉菜单放在这个div里就可以显示bootstrap的下拉菜单. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="drop

  • Bootstrap布局组件教程之Bootstrap下拉菜单

    Bootstrap布局组件教程之Bootstrap下拉菜单

    本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>

  • Bootstrap下拉菜单样式

    Bootstrap下拉菜单样式

    本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • Bootstrap下拉菜单Dropdowns的实现代码

    Bootstrap下拉菜单Dropdowns的实现代码

    本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap-下拉菜单标题</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel=&qu

随机推荐