文章/答案/技术大牛

发布

社区首页 >问答首页 >引导程序折叠数据-目标选择器失败

问引导程序折叠数据-目标选择器失败
EN

Stack Overflow用户

提问于 2017-08-18 20:47:41

回答 2查看 657关注 0票数 0

我一直在尝试在一次点击中折叠多个目标。根据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的回答，这应该是可能的。但是，在这种情况下，多个in也会失败。

jquery

html

css

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-21 22:51:00

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

票数 0

Stack Overflow用户

发布于 2017-08-18 21:04:40

为什么不把你所有的东西都包装在一个容器里呢？

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45757073

复制

相似问题

问引导程序折叠数据-目标选择器失败
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序折叠数据-目标选择器失败EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序折叠数据-目标选择器失败
EN