为了得到你想要的,你确实必须设置“data-parent”,但也要注意这也需要一个“.panel”类。从文档:
如果提供了选择器,则在显示此可折叠项时,将关闭指定父项下的所有可折叠元素。(类似于传统的手风琴行为 - 这取决于面板类)
演示: http: //www.bootply.com/qhs4dQbFZK
因此,您应该将可折叠项目包装在一个.panel
类中(或更改插件)。另见:https ://github.com/twbs/bootstrap/issues/15341
然后一个可折叠的项目将如下所示:
<div class="panel">
<div class="col-md-2 collapse" id="collapse1">
<div class="btn-group-vertical btn-block" data-toggle="buttons">
<button class="btn btn-default btn-lg" href="">First subtitle column</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button>
</div>
</div>
</div>
你的按钮应该有一个data-parent
属性:
<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button>
并且您的物品应该被包裹在 ( #menurow
) 之前设置的 id 中:
<div class="row" id="menurow"></div>
请注意,.panel
该类还设置了一些样式规则,对于您的情况,这些规则应该是覆盖(撤消),例如:.panel {margin-bottom: 0;}