我可以为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 documentation：

  

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

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

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

您可以在w3schools website上看到大量有效的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>

Live demo here

Answer 5

数据目标答案对我不起作用。但是，您可以使用JavaScript来执行此操作。

让你的按钮调用一些JavaScript，如：

$('.collapse-class').collapse('toggle')

请参阅：https://getbootstrap.com/javascript/#via-javascript-3。

Answer 6

在Bootstrap 4中有一个解决方案：

d3.selections

您最少需要的是：

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

（尽管data-target中的多个ID确实不起作用）。

Answer 7

Bootstrap 4使用document.querySelector而不是document.querySelectorAll。如果情况发生变化，那么一切正常。

Answer 8

在Bootstrap 4中，为每个div使用相同的 class 似乎可以使用 id 进行工作。

<div class="notes__content">
  <input type="text" placeholder="Somer awesome title" class="notes__title-input" autoComplete="off" />
  <textarea placeholder="What happened today?" class="notes__textarea"></textarea>
  <div class="notes__image">
    <img src="https://images.pexels.com/photos/4173624/pexels-photo-4173624.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="imagen" />
  </div>
</div>

Answer 9

我遇到了同样的问题，但引导程序不会让 data-toggle="tab" 放在 data-toggle="collapsed" 旁边，所以我的问题是这样的。

我有：

<a type="button" class="btn btn-default btn-lg btn-block " href="#ld-tab-pane-eye" aria-expanded="false" aria-controls="ld-tab-pane-eye" role="tab" data-toggle="tab" aria-haspopup="true" aria-expanded="false" style=" border: 0px ;"> </a>

这是切换标签：

<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile" data-toggle="collapse" data-target="#main-header-collapse" aria-expanded="false" data-changeclassnames='{ "html": "mobile-nav-activated overflow-hidden" }'>
</button>

但是这个关闭了模态，因为切换标签按钮在模态中。

为了解决这个问题，我添加了 id="popout"（到第一个按钮）和 id="popoutTrigger"（到第二个按钮）。

还有这个脚本（jQuery）：

$( "#popout" ).click(function() {
  $( "#popoutTrigger" ).trigger( "click" );
});

当用户点击模态中的切换按钮时，切换模态后会关闭。

这是我所做的事情的视图。

我希望我的解决方案会有所帮助。