bootstrap Collapse data-parent=“#accordion” 无效的问题

原创 已于 2024-01-30 14:14:12 修改 · 529 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #jquery #前端 #html5 #html

于 2024-01-26 11:59:28 首次发布
本文解释了在使用Bootstrap的collapse组件时，data-parent属性指向#accordion失效的原因，指出缺少panel类导致问题，以及如何正确嵌套以确保组件正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决bootstrap Collapse data-parent=“#accordion” 无效的问题

原因对比了一下之前写的代码。是因为没有加

这个盒子，
标签上面最好套一个class="panel"的div

 <div class="list">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel">
                                    <a class="faq_title" data-toggle="collapse" href="#faq2" data-parent="#accordion">
                                        What's your Port of Loading?
                                    </a>
                                    <div id="faq2" class="panel-collapse collapse " role="tabpanel">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    123
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <a class="faq_title" data-toggle="collapse" href="#faq_1">
                                        Where is your factory located? How do I visit there?
                                    </a>
                                    <div id="faq_1" class="panel-collapse collapse in" role="tabpanel"
                                        data-parent="#accordion">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    Our factory located in Guxiang Town,Chaozhou City,Guangdong
                                                    Province,China.About 30 mins from CHAOSHAN High Speed Rail
                                                    Station and 25 mins from JIEYANG airport within driving
                                                    distance.Please make a appointment with us in advance.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <a class="faq_title" data-toggle="collapse" href="#faq_2" data-parent="#accordion">
                                        What's your MOQ?
                                    </a>
                                    <div id="faq_2" class="panel-collapse collapse" role="tabpanel">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    Our factory located in Guxiang Town,Chaozhou City,Guangdong
                                                    Province,China.About 30 mins from CHAOSHAN High Speed Rail
                                                    Station and 25 mins from JIEYANG airport within driving
                                                    distance.Please make a appointment with us in advance.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="faq_title" data-toggle="collapse" href="#faq_3" data-parent="#accordion">
                                        What's your lead time?
                                    </a>
                                    <div id="faq_3" class="panel-collapse collapse" role="tabpanel">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    Our factory located in Guxiang Town,Chaozhou City,Guangdong
                                                    Province,China.About 30 mins from CHAOSHAN High Speed Rail
                                                    Station and 25 mins from JIEYANG airport within driving
                                                    distance.Please make a appointment with us in advance.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <a class="faq_title" data-toggle="collapse" href="#faq_4" data-parent="#accordion">
                                        What's your payment term?
                                    </a>
                                    <div id="faq_4" class="panel-collapse collapse" role="tabpanel">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    Our factory located in Guxiang Town,Chaozhou City,Guangdong
                                                    Province,China.About 30 mins from CHAOSHAN High Speed Rail
                                                    Station and 25 mins from JIEYANG airport within driving
                                                    distance.Please make a appointment with us in advance.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <a class="faq_title" data-toggle="collapse" href="#faq_5" data-parent="#accordion">
                                        What's your Port of Loading?
                                    </a>
                                    <div id="faq_5" class="panel-collapse collapse" role="tabpanel">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-body text_p2">
                                                    Our factory located in Guxiang Town,Chaozhou City,Guangdong
                                                    Province,China.About 30 mins from CHAOSHAN High Speed Rail
                                                    Station and 25 mins from JIEYANG airport within driving
                                                    distance.Please make a appointment with us in advance.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
前端领域：Bootstrap的折叠面板样式
AI架构全栈开发实战笔记
04-22 723
本文旨在为前端开发者提供关于Bootstrap折叠面板组件的全面指南。折叠面板的基本工作原理标准实现方式和最佳实践响应式设计考虑因素自定义样式和行为的技巧性能优化和可访问性建议背景介绍：提供折叠面板的基本概念和使用场景核心概念与联系：解析折叠面板的架构和交互流程实现原理与操作步骤：详细说明创建折叠面板的具体方法实际应用案例：展示不同场景下的实现示例高级定制技巧：探讨样式覆盖和功能扩展最佳实践与常见问题：总结使用经验和解决方案资源推荐：提供进一步学习的参考资料。
bootstrap collapse 失效
Martin 的博客
04-25 759
如果你的id是数字开头的，请修改 id 不要用数字开头，相应的那个aref 与id保持一致，不能是数字开头
bootstrap 4的关于collapse 折叠失效 解决办法
chencai56的博客
07-16 7373
bootstrap 4的关于collapse 折叠失效，自己找原因半天，发现是因为引用的jquery版本太低，用较高版本的jquery.js，此功能便会成功，不会失效了。 大家可以尝试使用更高版本的jquery. 折叠效果恢复 ...
bootstrap折叠调用collapse()后data-parent不生效问题
小红帽的博客
02-22 4951
今天做的项目，用到了bootstrap的折叠功能，这个功能需要只展开一个折叠框，点击一个就会自动隐藏另一个，初始按照API做了一下，发现一切运行正常，但是测试的同事提了一个bug，说切换到其他模块后再切换回来，发现原先展开的折叠框没有折叠起来--即恢复原样。于是又去修改代码，回来的时候对所有折叠框调用： .collapse('hide')方法。 $(".love .collapse").col
bootstrap之collapse
xixi
11-13 784
一、前言这节介绍下collapse(手风琴)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: collapse.js v3.3.7(折叠/手风琴) * http://getbootstrap.com/javascript/#collapse
全面解析Bootstrap手风琴效果
weixin_42194777的博客
06-11 343
触发手风琴可以通过自定义的data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。第一步:设计一个面板组合，里面有三个折叠区：&lt;div class="panel-group" id="accordion"&gt; &lt;div class="panel panel-default"&gt;
Bootstrap 折叠（Collapse）插件
最新发布
2402_83140078的博客
08-19 1480
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
Bootstrap学习笔记--下拉菜单，折叠，菜单，标签，Pills
qq_38409944的博客
05-26 5592
下拉菜单： 下拉菜单是比较常见的 直接看源码： .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单，请使用按钮或具有属性的类.dropdown-toggle和 属性data-toggle=&amp;amp;amp;amp;quot;dropdown&amp;amp;amp;amp;quot; span+.caret类可以创建一个插入箭头图标 .dropdown-menu类添加到&amp;amp;amp;amp;amp;lt;u
Bootstrap Accordion手风琴选项卡代码.zip
07-11
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion"> <div class="accordion-body"> 内容1 <!-- 更多选项卡... --> ``` 在...
Bootstrap创建可折叠的组件
11-25
当用户点击`.accordion-toggle` 链接时，Bootstrap会根据`data-toggle`属性的值（这里是`collapse`）以及`data-parent`指向的元素，找到对应的`.collapse`元素并触发折叠或展开效果。这个过程完全由Bootstrap的...
bootstrap的collapse使用data-parent属性完成同组问题（记录）
hp627578067的博客
10-26 3973
使用data-parent属性的时候须使用 .panel类，具体要求： panel类必须是 data-parent这个父容器的直接子元素 collapse类必须是 panel类的直接子元素
Bootstrap Accordion手风琴插件，点击标题仅本模块显示与隐藏，不影响其他同级模块
luyundesign的博客
05-07 722
以下为Bootstrap Accordion example 标题部分代码，每点击标题，本模块显示，其他模块隐藏，起关键作用的属性是“data-parent="#accordion"”，只需要将每个标题中的data-parent属性删除，就可以实现点击标题时，本模块显示与隐藏，不影响其他模块。这样用户可以展开多个Accordion项 <div class="panel-heading" ro...
三、easyUI中的accordion（分类）组件
weixin_44230693的博客
05-16 904
三、easyUI中的accordion（分类）组件
Bootstrap无法正常使用解决办法
A88552211的博客
08-09 5737
1、没有正确引入 正确方法： <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> 2、版本不对 一般 npm 安装 的都是最新版本 有时候不稳定或你使用的某些样式在新版本中有变 正确方法： 打开 package.jsion 文件 修改版本：只要修改到比最新要低的版本就行；然后 npm install ...
bootstrap-collapse.js 之无法实现折叠效果
柒浅的博客
07-13 6431
问题：Uncaught ReferenceError: jQuery is not defined at collapse.js:212原因：加载jQuery的顺序错误，依赖于jQuery的其它JavaScript脚本先于jQuery加载完成并执行。这时jQuery尚未加载，因此依赖于jQuery的代码调用jQuery的话就会出错。解决方案：将jQuery库放在依赖于jQuery的JavaScrip
ant collapse组件 accordion失效
weixin_41438668的博客
04-21 563
记录一次 ant collapse组件 accordion失效。每个collapse每次只能打开一扇。
Bootstrap Accordion使用小技巧
Keep Moving
09-06 5357
Accordion自带的手风琴挺不错的，按照官网的API来可以实现完美 的效果。 但是有个时候 需要实现一些自己想要的效果。这里记录一下。 1.要设置某个部分的div 首次加载就处于打开状态 ，在div#accordion-body上加上一个class： in 如默认的为： 改为： 如果style=“height:0px;”之类的
【Bootstrap】选择折叠项collapse
热门推荐
编程记录，亲测有效
10-30 1万+
使用Bootstrap来编写 选择折叠项collapse 选择折叠项collapse在网页中并不常用，不过也并不少见。 这也算是一个比较实用的组件……
idea配置如何配置Bootstrap框架的Collapse插件
05-31
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 折叠面板1 <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> 折叠面板内容1 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值