Bootstrap 3 每次在其他部分折叠一个答案

【问题标题】：Bootstrap 3 Collapse in other section one per timeBootstrap 3 每次在其他部分折叠一个
【发布时间】：2015-04-07 01:38:06
【问题描述】：

我整理了一个包含类别的常见问题解答。我的想法是使用功能 Collapse bootstrap 来显示每个类别，并在折叠中看到带有问题和答案的手风琴。

它的结构分为两列，左侧选择类别和正确的问题和答案。

我需要在上次关闭时选择第二个类别（折叠）。

我可以在这里建立。

<div class="container">
  <section id="tratamientos" class="row">
    <h1>Tratamientos</h1>
    <div class="col-sm-2">
      <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#cirugiaoral" aria-expanded="false" aria-controls="cirugiaoral">Cirugía Oral</button>
      <br><br>
      <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#blanqueamiento" aria-expanded="false" aria-controls="blanqueamiento">Blanqueamiento</button>
    </div>

    <div class="col-sm-10">

      <div class="collapse" id="cirugiaoral">
        <h3>Cirugía Oral</h3>
        /* FAQ with accordion */
        <ul>
          <li>item with accordion</li>
          <li>item with accordion</li>
        </ul>
      </div>

      <div class="collapse" id="blanqueamiento">
        <h3>Blanqueamiento</h3>
        /* FAQ with accordion */
        <ul>
          <li>item with accordion</li>
          <li>item with accordion</li>
        </ul>
      </div>
    </div>
  </section>
</div>

Bootply here

【问题讨论】：

你的意思是像手风琴一样吗？如果是这样，请参阅Bootstraps Accordion Docs
@Ted 我需要在两列中做，你会使用手风琴，在另一个手风琴里面会有一个手风琴，这对用户不利。请看bootply中的例子
啊……错过了引导。

标签： jquery twitter-bootstrap accordion collapse

【解决方案1】：

添加此脚本：

$('.collapse').on('show.bs.collapse', function (e) {
    $('.collapse').not(e.target).removeClass('in');
});

当一个部分显示时，它会为你隐藏其他部分

看到这个Bootply

【讨论】：