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

今天做的项目，用到了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不生效的快速解决办法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # collapse # vue组件 $children # $refs # $parent的使用详解 # PHP面向对象学习之parent::关键字 # PHP中子类重载父类的方法【parent::方法名】 # php实现parent调用父类的构造方法与被覆写的方法 # getcwd cannot access parent directories错误解决方法 # springboot实现拦截器之验证登录示例 # Springboot使用POI实现导出Excel文件示例 # 详解SpringBoot文件上传下载和多文件上传（图文） # SpringBoot定时任务两种(Spring Schedule 与 Quartz 整合 )实现方法 # 详解Spring Boot 项目中的 parent # 多个 # 几个 # 就会 # 小编 # 又去 # 的是 # 发现了 # 很好 # 在此 # 是由 # 我们可以 # 我认为 # 要想 # 给大家 # 你去 # 写了 # 这个时候 # 重写 # 可以使用 # 一个问题

返回目录在线咨询

上一篇：票务网站制作流程图,票务和官网有什么区别？
下一篇：服务器网站扫描工具能否检测到跨站脚本攻击（XSS）并提供修复建议？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求