我有四个菜单，* 我使用了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>
1条答案
按热度按时间ercv8c1e1#
使用jQuery可以很容易地实现这一点：
添加以下内容以折叠所有其他部分，并仅打开单击时选定的部分：
这个单击动作从可折叠部分中删除了'in'类，这是使它们出现在示例中的触发器。如果我使用的选择器与将来放入.example-thumbnails div中的按钮冲突，可以修改它们。
这里有一支笔可以在工作中展示它：
http://codepen.io/mutualdesigns/pen/AXYzbV