jquery - Bootstrap 崩溃数据目标选择器失败

标签 jquery html css twitter-bootstrap bootstrap-4

我一直在尝试一次单击即可折叠多个目标。根据 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 也失败了。

最佳答案

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

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

关于jquery - Bootstrap 崩溃数据目标选择器失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45757073/

相关文章:

javascript - 当溢出 :auto, 时不要改变宽度值(最大宽度)。 (滚动条 CSS)

javascript - JQuery:如何触发两个动画?

html - 为什么内联 block 的内容会影响它在容器中的位置

css - Webpack 将 CSS 编译成奇怪的类名

jquery - 使用 <div> 的位置在我的点击事件中减去?

jquery - jQuery 滚动顶部动画

javascript - 使用 AngularJS 在 HTML 标记上执行 if/else

html - 在小宽度上重叠

php - 通过 HTML 表中的 while 循环显示数据库中的信息

css - 左对齐居中表格内的列表