-1

先免责声明:1)有史以来的第一个问题,我希望我做对了,如果不是这样,请道歉。2) 英语不是我的母语,如有错误请见谅。3)进行了搜索,但找不到答案。

尝试用语言解释将意味着很多话,而 bootply 可以说明一切:

http://www.bootply.com/EBIMFQ5jEC

基本上,我想要的几乎是工作,除了这个:例如,我希望单击“标题 3”(在您单击“标题 1”或“标题 2”之后)隐藏“第一/第二列(s )”,因此“第三列”是唯一显示的列(当然反之亦然)。我希望这很清楚。

我用 data-parent 尝试了一些东西(例如: http: //www.bootply.com/pgoT2IPG8Ddata-parent="#collapse1"前三个按钮添加了)但无法实现任何目标......

提前感谢您的帮助!

4

1 回答 1

2

为了得到你想要的,你确实必须设置“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;}

于 2014-12-11T12:46:37.767 回答