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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
解析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 数组使用详解 推荐
2011/06/02 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
二级域名转向类
2006/11/09 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
如何表示python中的相对路径
2020/07/08 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
Java模拟试题
2014/11/10 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
思想品德课教学反思
2014/02/10 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
公司禁烟通知
2015/04/23 职场文书
返乡农民工证明
2015/06/24 职场文书
周一给客户的问候语
2015/11/10 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers