引导折叠数据目标选择器失败答案

【问题标题】：Bootstrap collapse data-target selector fails引导折叠数据目标选择器失败
【发布时间】：2017-08-21 22:51:00
【问题描述】：

我一直在尝试一次单击折叠多个目标。根据 Bootstrap 文档，这可以通过使用 data-target 属性指定匹配的 CSS 选择器来实现。然而，折叠似乎只适用于与选择器匹配的第一个元素。这里的最小示例：

<!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 可以折叠多个元素吗？根据this的回答，应该是可以的。但是，在这种情况下，多个 ID 也失败了。

【问题讨论】：

当设置反映运行 Bootstrap 4.0-beta 时，您的示例在 Bootply 中有效。是否有可能是您使用 Alpha 版本的问题？
确实，这解决了问题。你想把它变成一个答案，以便我接受吗？
我可能会删除这个问题。鉴于答案是“使用最新版本”，剩下的问题没有多大价值。

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

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

<!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>

【讨论】：

当容器断开连接并位于页面的不同部分时，这不是一个真正的选项。当然，在最小的示例中，这可能是一个有效的选项。

【解决方案2】：

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

【讨论】：