bootstrap折叠调用collapse()后data-parent不生效问题
来源:互联网 发布:程序员去汽车厂 编辑:程序博客网 时间:2024/05/18 03:31
今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样。于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法。
$(".love .collapse").collapse('hide');
调用之后发现,点击连接苗,data-parent失效了,也就是可以同时展开多个折叠框
于是找到了两个解决的方法:
方法一:
在我的项目中,折叠框默认是折叠的,即没有.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()方法。
0 0
- bootstrap折叠调用collapse()后data-parent不生效问题
- bootstrap之collapse(折叠)
- 【Bootstrap】选择折叠项collapse
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- Bootstrap的js插件之折叠(collapse)
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- bootstrap-collapse.js 之无法实现折叠效果
- Bootstrap基础23——折叠与展开collapse
- Bootstrap Collapse
- nginx配置反向代理,域名代理后不生效问题
- Linux 里hostName和修改后不生效的问题
- atomikos 配置好后 @transactional 注解不生效的问题
- 解决修改CSS文件后网页显示不生效问题
- 57-002-1 bootstrap中利用面板实现折叠功能collapse
- bootstrap中jquery插件——collapse折叠效果-手风琴效果
- inotify不生效问题
- ubuntu16.04忘记密码处理方法
- Codeforces Round #399 (Div. 1 + Div. 2, combined)C. Jon Snow and his Favourite Number
- 各项知识链接集合(比较杂)
- [HTC Vive + Unity开发]——VRTK的研究——用手柄旋转物体(使用VRTK_Knob脚本)
- TCP/IP 多播和多播路由
- bootstrap折叠调用collapse()后data-parent不生效问题
- csdn上第一篇博客
- 划重点
- 三次握手四次分手
- 数据结构实验:哈希表
- STM32F4 读写 AT24C512问题
- VMware环境下UbuntuKylin16.04配置open-vm-tools、默认root密码修改
- 【window】修改cmder工具的命令行提示符(λ改成$)
- mac启动myself