Question

我正在使用bootstrap 4 alpha折叠选项..我有两个菜单，我给了collpase类位置：absolute.So当我点击任何折叠按钮时它应该打开它的内容，当点击下一个崩溃按钮它应该显示它的内容。一切正常但问题是当我点击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按钮它应该关闭好按钮的内容并显示坏按钮内容反之亦然。

这是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');
 })
})

单击

1 个答案: