Question

免责声明： 1）有史以来第一个问题，我希望我能做到这一点，如果事实并非如此，请道歉。 2）英语不是我的母语，对任何错误都很抱歉。 3）进行了搜索，但无法找到答案。

尝试用文字解释将意味着许多单词，而bootply可以说明一切：

http://www.bootply.com/EBIMFQ5jEC

基本上，我想要的几乎是工作除了这个：我想点击＆＃34;标题3＆＃34;例如（在您点击＆＃34;标题1＆＃34;或＆＃34;标题2＆＃34;）之后隐藏＆＃34;第一/第二列＆＃34;这样＆＃34;第三列＆＃34;是唯一显示的（当然反之亦然）。我希望这很清楚。

我尝试了一些数据父级的东西（例如：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>

您的商品应该包装在（#menurow）之前的ID设置中：

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

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

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

1 个答案: