Twitter bootstrap：可折叠元素中的可折叠元素

Question

首先声明： 1）有史以来的第一个问题，我希望我做对了，如果不是这样，请道歉。 2) 英语不是我的母语，如有错误请见谅。 3) 搜索了一下，没有找到答案。

试图用文字来解释意味着很多话，而靴子可以说明一切：

http://www.bootply.com/EBIMFQ5jEC

基本上，除此之外，我想要的几乎可以工作：例如，我希望单击“标题 3”（在您单击“标题 1”或“标题 2”之后）隐藏“第一/第二”列”，因此“第三列”是唯一显示的列（当然反之亦然）。我希望这很清楚。

我用 data-parent 尝试了一些东西（例如：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 中（#menurow）：

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

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