Twitter引导：可折叠元素中的可折叠元素

Question

免责声明优先： 1）有史以来的第一个问题，我希望我做对了，如果不是这样的话，我很抱歉。 2）英语不是我的母语，所以很抱歉有任何错误。 3）进行搜索并找不到答案。

试图言传将意味着很多的话而bootply可以说这一切：

基本上，我想除了这几乎是工作的内容：我想上“的标题，点击3“（例如，在点击”标题1“或”标题2“后）隐藏”第一/第二列“，从而仅显示”第三列“（反之亦然）课程）。我希望这很清楚。

我尝试了一些事情数据父母（如本：http://www.bootply.com/pgoT2IPG8D具有data-parent="#collapse1"增加了对前三个按钮），但不能达到什么...

在此先感谢您的帮助！

Answer 1

为了得到你想要的东西，你必须设置'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> 

和你的项目应包的ID SET内之前（#menurow）：

<div class="row" id="menurow"></div> 

请注意，.panel类还设置了一些样式规则，对于您的情况应该取消（撤销），例如：.panel {margin-bottom: 0;}