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