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

BootstrapAccordion使用详解

最新推荐文章于 2025-09-29 11:29:39 发布

原创最新推荐文章于 2025-09-29 11:29:39 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

Js 专栏收录该内容

39 篇文章

订阅专栏

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

以下为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>