Question

我的网站上有一个Bootstrap手风琴luukvanaggelen.com/test4/当您滚动到产品并点击产品时，它会展开下面的产品信息部分。单击下一个产品将缩小之前展开的产品并展开单击等产品等。目前仅实现产品的顶线。在Firefox中，它在某种意义上工作了一半，当它处于扩展阶段时，下一行将保持原位，并且只有在转换完成后才会移动到新的位置。我希望这也可以与手风琴Div一起顺利过渡。在Chrome中，它根本不起作用。手风琴的div扩展，但下一排产品根本没有移动，手风琴div隐藏在产品图像背后。我一直在尝试一切，但我似乎无法让它发挥作用

这是我手风琴的代码

<div class="row">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> </a> </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <div class="row productwit">
            <div class="col-lg-2"> </div>
            <div class="col-lg-8" style="text-align:left; color:#000;">
              <h1 style="color:#000;">Wat is dit dan</h1>
              <p>Dit is een heel mooi product! Product 1</p>
            </div>
            <div class="col-lg-2"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> </a> </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <div class="row productzwart">
            <div class="col-lg-2"> </div>
            <div class="col-lg-8" style="text-align:left;">
              <h1>Wat is dit dan</h1>
              <p>Dit is een heel mooi product! Product 2</p>
            </div>
            <div class="col-lg-2"> </div>
          </div>
        </div>
      </div>
    </div>
     <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <div class="row pr" style="background-color:#30302f;">
            <div class="col-lg-2"> </div>
            <div class="col-lg-8" style="text-align:left;">
              <h1>Wat is dit dan</h1>
              <p>Dit is een heel mooi product! Product 3</p>
            </div>
            <div class="col-lg-2"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> </a> </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <div class="row pr" style="background-color:#30302f;">
            <div class="col-lg-2"> </div>
            <div class="col-lg-8" style="text-align:left;">
              <h1>Wat is dit dan</h1>
              <p>Dit is een heel mooi product! Product 4</p>
            </div>
            <div class="col-lg-2"> </div>
          </div>
        </div>
      </div>
    </div>
  </div>

我希望这是一个明确的解释，我期待着任何解决方案。

编辑：我很难从代码中创建一个JSFiddle，所以我上传了一个只有问题区域的存档。您可以在这里下载; https://mega.nz/#!ABBGQCpb!aIOiTUiCsx8qANDr3XDTUhL0f8RhH0fBCJgXSeHWqL4希望这足以解决它

Bootstrap手风琴转换会干扰底层的div

0 个答案: