Bootstrap 3每次折叠在其他部分中

Question

我已经汇总了一个常见问题解答.我的想法是使用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在这里

Answer 1

添加此脚本:

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

当显示景象时,这将隐藏其他部分

看到这个Bootply