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');
});

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

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

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

data-toggle =“collapse”，带有多个触发器/ bootstrap

1 个答案: