我可以为Twitter Bootstrap崩溃指定多个数据目标吗？

Question

我想在单击一个触发器时将两个div作为扩展目标？那可能吗？

Answer 1

您可以在数据目标中简单地添加逗号分隔的所有ID:

  <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
  data-toggle="collapse" data-target="#demo,#demo1,#demo2">Hide them all</button>

Answer 2

对两个div使用相同的类并data-target根据此设置.给你的div也是同一个父(也可以是一个类)并data-parent根据这个设置.

<button type="button" class="btn btn-danger" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
      simple collapsible
    </button>
    <div id="wrap">
    <div class="demo collapse">
    test1
    </div>
    <div class="demo collapse">
    test1
    </div>
    </div>

Answer 3

从Bootstrap 3文档:

data-target属性接受CSS选择器以应用折叠.

因此,您可以使用以逗号分隔的id,类选择器等列表作为data-target属性值:

<button class="btn btn-primary" type="button"
    data-toggle="collapse" data-target="#target1,#target2,#target3"
    aria-expanded="false" aria-controls="target1,target2,target3">

您可以在w3schools网站上看到大量有效的CSS选择器.

Answer 4

如果你想隐藏一个元素并显示另一个元素(比如bootstrap手风琴但没有面板)你可以添加多个目标,但也可以添加类'in'以在加载时展开一个元素!

<div class="collapse text-center clearfix in" id="section1">
   <h1>This is section 1</h1>
   <p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
   <h1>Boo!!</h1>
   <p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>

现场演示

Answer 5

Bootstrap 4中有一个解决方案：

Bootstrap 4 文档：多个目标

您至少需要的是：

• data-toggle="collapse" data-target=".multi-collapse"用于切换按钮
• class="collapse multi-collapse"对于每个需要切换的元素

（虽然多个 iddata-target确实不起作用）。