点击后引导折叠不折叠答案

【问题标题】：Bootstrap collapse not collapsing after click点击后引导折叠不折叠
【发布时间】：2018-03-25 04:31:45
【问题描述】：

我正在使用 bootstrap 4 alpha 折叠选项..我有两个菜单，并且我已经给出了 colpase 类位置：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%;
}

我想使用此折叠作为单击单个按钮它会显示内容并再次单击该按钮它应该折叠并且当首先单击好按钮然后如果我单击坏按钮它应该关闭好按钮的内容并显示按钮内容错误，反之亦然。

这里是DEMO

【问题讨论】：

看看codepen.io/ushma/pen/mBGdaV

标签： javascript jquery css twitter-bootstrap

【解决方案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');
 })
})

【讨论】：