我已经整理了一个常见问题解答的类别。我的想法是使用 Collapse bootstrap 功能来显示每个类别,并在折叠中看到带有问题和答案的 Accordion 。
它分为两列,左侧选择类别以及正确的问题和答案。
我需要在前一次收盘时选择第二个类别(折叠)。
我可以在这里 build 。
<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>
最佳答案
添加此脚本:
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').not(e.target).removeClass('in');
});
当显示某个部分时,这将为您隐藏其他部分
查看此Bootply
关于jquery - Bootstrap 3 每次折叠其他部分一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28373780/