Question

有没有办法使用bootstrap collapsable html属性使用相同的命令打开和折叠两个不同的元素？

我有一个复选框，当我检查它时，我想打开一个可折叠的div，同时我想关闭另一个。但请注意，这不是真正的手风琴，因为我没有两个命令，只有一个。

Answer 1

在官方网站的example中，他们使用id。但是，您可以使用class，可以将其分配给多个元素。

<div class="bs-example">
  <p>
    <a class="btn btn-primary collapsed" role="button" data-toggle="collapse" href=".collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
    <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target=".collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-target
    </button>
  </p>

  <div aria-expanded="true" class="collapseExample collapse in" style="height: 0px;">
    <div class="well">
      Initially shown block of text.
    </div>
  </div>
  <div aria-expanded="false" class="collapseExample collapse" style="height: 0px;">
    <div class="well">
      Initially hidden block of text.
    </div>
  </div>
</div>

注意不同元素的collapse和collapse in。他们描述了初始状态。因此，如果您希望最初显示一个元素而另一个元素被隐藏，那么您应该分配相应的不同初始状态。

如果你想要复选框的相同行为，只需用它替换按钮：

<div class="bs-example">
  <div class="checkbox">
    <label>
      <input type="checkbox" data-toggle="collapse" href=".collapseExample" aria-expanded="false" aria-controls="collapseExample"> Check me out
    </label>
  </div>

  <div aria-expanded="true" class="collapseExample collapse in" style="height: 0px;">
    <div class="well">
      Initially shown block of text.
    </div>
  </div>
  <div aria-expanded="false" class="collapseExample collapse" style="height: 0px;">
    <div class="well">
      Initially hidden block of text.
    </div>
  </div>
</div>

Answer 2

您可以使用Jquery来实现这一效果。

在此示例中，Bootstrap Accordion（complete examples）他们使用一个buttom来显示，另一个用来关闭组件。

例如，在您的情况下，您需要捕获open事件，并关闭另一个div。

修改

在official website中有一个示例，请尝试：

Bootstrap collapse命令具有反向可折叠状态的两个元素

2 个答案: