javascript - Bootstrap 折叠点击后不折叠

Question

我正在使用 bootstrap 4 alpha 折叠选项。我有两个菜单，我给了 collpase 类position:absolute。所以每当我点击任何折叠按钮时，它应该打开它的内容，当点击下一个折叠时按钮它应该显示它的内容。一切正常但问题是当我单击 GOOD 按钮时它显示它的内容并且单击 Bad 按钮它显示它的内容代替 Good 按钮内容但是如果我再次单击 BAD 按钮或 Good 按钮同样，它不会折叠内容，只是将内容一个移动到另一个。

<p>
  <a class="btn btn-danger" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>


.collapse{
  position:absolute;
  width:100%;
}

我想使用这个折叠作为点击单个按钮它会显示内容然后再次点击那个按钮它应该折叠并且当第一次点击 Good 按钮然后如果我点击 Bad 按钮它应该关闭 good 按钮的内容并显示反之亦然。

这里是 DEMO

Answer 1

所提供示例的问题是，当使用 position:absolute 时，将与下一个元素重叠，因此会出现奇怪的行为。

这个问题的解决方案是我们必须从 CSS 中删除 position:absolute 并且我们必须在打开其他可折叠之前关闭所有可折叠。

这是工作示例:https://jsfiddle.net/ep2s35cm/

HTML

<p>
  <a class="btn btn-danger myButton" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    GOOD
  </a>
  <a class="btn btn-primary myButton" data-toggle="collapse" href="#collapseExamplesecond" aria-expanded="false" aria-controls="collapseExample">
    BAD
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
   I am good
  </div>
</div>
<div class="collapse" id="collapseExamplesecond">
  <div class="card card-block">
    I am bad
  </div>
</div>

CSS

.collapse{
  width:100%;
}

JavaScript

$(document).ready(function(){
 $('.myButton').on('click',function(){
 $('.collapse').collapse('hide');
 })
})