Question

我一直试图在一次点击时折叠多个目标。根据Bootstrap文档，这可以通过将匹配的CSS选择器与data-target属性一起指定来实现。但是，崩溃似乎仅适用于与选择器匹配的第一个元素。最小的例子：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
  <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div>
  <div class="col properties collapse Centrifuge2-collapsible">Properties</div>
  <div class="features Centrifuge2-collapsible collapse">Features</div>
</body>

如果我删除或编辑第一个可折叠div上的“Centrifuge2-collapsible”类，则第二个div将变为可折叠。

Bootstrap可以折叠目标多个元素吗？根据{{3}}回答，它应该是可能的。但是，在这种情况下，多个ID也失败了。

Answer 1

为什么不将所有物品包装在一个容器中......

＆＃13;

<!doctype html>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


  <div class="device-icon-wrapper" data-toggle ="collapse" data-target=".Centrifuge2-collapsible">Collapse</div>
  <div class="Centrifuge2-collapsible collapse">
  <div class="col properties">Properties</div>
  <div class="features">Features</div>
  </div>

＆＃13;

Answer 2

正如Robert C所指出的，这是4.0.0 alpha版本的一个问题，并且已经在测试版中得到了解决。更新Bootstrap版本解决了这个问题。

Bootstrap折叠数据目标选择器失败

2 个答案: