今天做的项目，用到了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 】

相关推荐： 香港服务器租用每月最低只需15元？  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  网站制作壁纸教程视频,电脑壁纸网站？  浅谈javascript alert和confirm的美化  怎样使用JSON进行数据交换_它有什么限制  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何快速使用云服务器搭建个人网站？  深圳网站制作培训,深圳哪些招聘网站比较好？  如何选择PHP开源工具快速搭建网站？  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  使用Dockerfile构建java web环境  如何在阿里云购买域名并搭建网站？  如何在IIS中配置站点IP、端口及主机头？  如何在万网自助建站中设置域名及备案？  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何在局域网内绑定自建网站域名？  常州企业网站制作公司,全国继续教育网怎么登录？  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  bing浏览器学术搜索入口_bing学术文献检索地址  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  黑客如何利用漏洞与弱口令入侵网站服务器？  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  如何在不使用负向后查找的情况下匹配特定条件前的换行符  微信推文制作网站有哪些,怎么做微信推文，急？  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  Python结构化数据采集_字段抽取解析【教程】  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel如何创建自定义Facades？（详细步骤）  如何用PHP快速搭建高效网站？分步指南  制作企业网站建设方案,怎样建设一个公司网站？  中国移动官方网站首页入口 中国移动官网网页登录  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  网站制作报价单模板图片,小松挖机官方网站报价？