html - 将 Accordion 功能添加到引导链接列表

我很难过这一点。我试图做到这一点，所以当您单击引导程序链接列表项时，它会展开以显示手风琴形式的其他文本。

这是我的代码：http://www.bootply.com/6zXrStZ2o3

<div class="container">
<h1>Bootstrap 3 List Groups</h1>
  <div class="list-group">
    <a href="#" class="list-group-item">
      Linked item in .list-group
    </a>
    <a href="#" class="list-group-item">Linked item in .list-group with Chevron and Badge
    </a>
  </div>
</div>

当我单击链接列表之一的标题时，如何展开以显示更多内容？

最佳答案

只需将data-toggle="collapse"和data-target添加到元素即可自动分配对可折叠元素的控制

<div class="container">
<h1>Bootstrap 3 List Groups</h1>
  <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info1">
      Linked item in .list-group
      <div id="info1" class="collapse">More Info #1</div>
    </a>
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info2">Linked item in .list-group with Chevron and Badge
      <div id="info2" class="collapse">More Info #2</div>
    </a>
  </div>
</div>

关于html - 将 Accordion 功能添加到引导链接列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25105158/