我正在使用 Bootstrap 可折叠按钮组。我希望一次只显示一个组框。我在 js 中创建了一个函数来删除“in”类并更改 aria-expanded 语句，但我认为这是无用的，因为人们正在使用 data-parent="#myGroup"。
显然 data-parent="#myGroup"对我不起作用是有原因的。
我尝试在单个元素、按钮和折叠组上使用 data-parent，但仍然无法正常工作。
在这个 fiddle 中，您可以看到可以显示多个组。我希望其他人在我按下按钮时隐藏起来。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p>
<button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup">
A
</button>
<button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup">
B
</button>
<button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup">
C
</button>
<button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup">
D
</button>
</p>
<div class="collapse" id="AA" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>
<div class="collapse" id="BB" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>
<div class="collapse" id="CC" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>
<div class="collapse" id="DD" data-parent="#myGroup">
<div class="card card-block">
bla bla bla
</div>
</div>
</body>
</html>最佳答案
帖子来自:ambs 关于重复问题:CSS Collapsible groups - Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="container">
<div class="panel">
<p>
<button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container">
A
</button>
<button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container">
B
</button>
</p>
<div class="collapse" id="AA">
<div class="card card-block">
bla bla bla A
</div>
</div>
<div class="collapse" id="BB">
<div class="card card-block">
bla bla bla B
</div>
</div>
</div>
</div>
</body>关于javascript - 可折叠按钮 - Bootstrap 3.3.4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39932478/