data-toggle="collapse" 有多个触发器 /bootstrap

Question

我有四个菜单，我使用 bootstrap 中的折叠功能，每个菜单都有自己的内容。

有没有办法只显示所选按钮/菜单的内容并折叠/隐藏其他内容？？

谢谢

<div class="row example-row example-thumbnails">
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="A - Standard Tip Profile" src="images/products/mm/metal-type/standard-metal-type.png" />
<div class="caption">
<h3>A - STANDARD TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-tungsten">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="H - Heat Treated Tapered Tip Profile" src="images/products/mm/metal-type/heat-metal-type.png" />
<div class="caption">
<h3>H - HEAT TREATED TAPERED TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-heat">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="B - Blunted Tip Profile" src="images/products/mm/metal-type/blunted-metal-type.png" />
<div class="caption">
<h3>B - BLUNTED TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-blunted">Click here</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><img alt="F - Extra Fine Tip Profile" src="images/products/mm/metal-type/extra-metal-type.png" />
<div class="caption">
<h3>F - EXTRA FINE TIP PROFILE</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#order-online-extra">Click here</button>
</div>
</div>
</div>
</div>

还有我的四个内容 div：

<div class="col-xs-12 collapse" id="order-online-tungsten">
content
</div>
<div class="col-xs-12 collapse" id="order-online-extra">
content
</div>
<div class="col-xs-12 collapse" id="order-online-blunted">
content
</div>
<div class="col-xs-12 collapse" id="order-online-heat">
content
</div>

Answer 1

使用 jQuery 你可以很容易地做到这一点：

添加以下内容以折叠所有其他部分并仅打开单击时选择的部分：

$('.example-thumbnails button').on('click', function() {
  $('.collapse').removeClass('in');
});

此点击操作会从可折叠部分中删除“in”类，这是使它们出现在您的示例中的触发器。如果我使用的选择器与放入 .example-thumbnails div 中的未来按钮冲突，则可以修改它们。

这是一支在工作中展示它的笔：

http://codepen.io/mutualdesigns/pen/AXYzbV