Bootstrap Accordion手风琴插件，点击标题仅本模块显示与隐藏，不影响其他同级模块

RightHereWaitingFY

于 2020-05-07 17:12:44 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： Js

本文链接：https://blog.youkuaiyun.com/luyundesign/article/details/105976730

Js 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap的Accordion组件实现模块的展开与折叠功能。通过调整代码中的data-parent属性，可以控制点击标题时，本模块与其他模块的显示状态，允许用户同时展开多个Accordion项。

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

以下为Bootstrap Accordion example 标题部分代码，每点击标题，本模块显示，其他模块隐藏，起关键作用的属性是“data-parent="#accordion"”，只需要将每个标题中的data-parent属性删除，就可以实现点击标题时，本模块显示与隐藏，不影响其他模块。这样用户可以展开多个Accordion项

<div class="panel-heading" role="tab" id="headingOne">
  <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>
</div>