今天做的项目，用到了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  # 多个  # 几个  # 就会  # 小编  # 又去  # 的是  # 发现了  # 很好  # 在此  # 是由  # 我们可以  # 我认为  # 要想  # 给大家  # 你去  # 写了  # 这个时候  # 重写  # 可以使用  # 一个问题 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： javascript事件捕获机制【深入分析IE和DOM中的事件模型】  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Laravel如何实现模型的全局作用域？（Global Scope示例）  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  如何快速选择适合个人网站的云服务器配置？  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Laravel如何实现一对一模型关联？（Eloquent示例）  香港服务器建站指南：免备案优势与SEO优化技巧全解析  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  常州企业网站制作公司,全国继续教育网怎么登录？  如何彻底删除建站之星生成的Banner？  如何在IIS7中新建站点？详细步骤解析  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  企业网站制作这些问题要关注  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  在centOS 7安装mysql 5.7的详细教程  利用vue写todolist单页应用  高性能网站服务器部署指南：稳定运行与安全配置优化方案  太平洋网站制作公司,网络用语太平洋是什么意思？  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  如何快速搭建虚拟主机网站？新手必看指南  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  成都网站制作公司哪家好,四川省职工服务网是做什么用？  Laravel如何使用Gate和Policy进行授权？（权限控制）  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  深圳网站制作平台,深圳市做网站好的公司有哪些？  如何用免费手机建站系统零基础打造专业网站？  php结合redis实现高并发下的抢购、秒杀功能的实例  Laravel安装步骤详细教程_Laravel环境搭建指南  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  Python进程池调度策略_任务分发说明【指导】  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  Laravel如何与Inertia.js和Vue/React构建现代单页应用  JavaScript Ajax实现异步通信  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  Python函数文档自动校验_规范解析【教程】  如何在香港服务器上快速搭建免备案网站？  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  如何在云虚拟主机上快速搭建个人网站？  北京企业网站设计制作公司,北京铁路集团官方网站？  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  使用Dockerfile构建java web环境  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何快速辨别茅台真假？关键步骤解析  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】