bootstrap折叠调用collapse()后data-parent不生效的快速解决办法


Posted in Javascript onFebruary 23, 2017

今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样。于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法。

$(".love .collapse").collapse('hide');

调用之后发现,点击连接苗,data-parent失效了,也就是可以同时展开多个折叠框

这严重脱离了需求,于是又去查了API并写了几个demo,发现了一个问题,只要在初始化的时候调用 .collapse()方法,就会出现这种同时展开多个折叠框的情况。但是奇怪的是:当页面渲染出来后,你去点击了折叠框后,这个时候再触发某个事件调用.collapse()方法,就不会出现这种同时展开多个的情况。

于是找到了两个解决的方法:

方法一:

在我的项目中,折叠框默认是折叠的,即没有.in类,基于以上的发现,于是改变源码:

$(".love .collapse.in").collapse('hide');

因为在bootstrap中折叠框的展开是由.in类修饰的,所以有.in类的必定是经过点击的,在初始化的时候

$(".love .collapse.in")

返回的必定是[]数组,因为默认是收起的。经过几个浏览器的测试,发现没有问题,问题解决了。

方法二:

在一个外国网站也发现了一个解决的方法,触发这种事件发生的原因是bootstrap的js的某个机制的实现问题,但是API没有给出这种事件的说明和处理方法,于是我们可以重写折叠框展开和收起的事件,首先在连接处加一个类.collapse-toggle,这个类可以随便指定.:

$(document).on('click', '.collapse-toggle', function(event) { 
    event.stopPropagation(); 
    var $this = $(this); 
    var parent = $this.data('parent'); 
    var actives = parent && $(parent).find('.collapse.in'); 
    // From bootstrap itself 
    if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
    } 
    var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 
    $(target).collapse('toggle'); 
});​

这里用到了jQuery的data()方法,data()方法可以获取标签的data-*属性,我认为用在这里不是很好,主要是这个方法在IE6、IE7中不支持,要想完美兼容,可以使用attr()方法。

以上所述是小编给大家介绍的bootstrap折叠调用collapse()后data-parent不生效的快速解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
js实现弹幕墙效果
Dec 10 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
You might like
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP基本语法实例总结
2016/09/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP7变量处理机制修改
2021/03/09 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
JQuery元素快速查找与操作
2018/04/22 jQuery
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python中的colorlog库使用详解
2019/07/05 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python小白垃圾回收机制入门
2020/06/09 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
市优秀教师事迹材料
2014/02/05 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
5s推行计划书
2014/05/06 职场文书
实习证明格式范文
2015/06/16 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python