Bootstrap 3:在隐藏内容之前,折叠主体会折叠

时间:2014-12-15 21:16:12

标签: javascript jquery css twitter-bootstrap

我遇到手风琴崩溃的问题。它以前工作得很好,但在某个时间点断开,我不完全确定这是否与Bootstrap 3升级有关。我最近重写了一半的项目,所以有可能是我不小心做的事情。

我用KnockoutJS制作了一部非常大的手风琴。它填充组/面板并按预期打开,但是当我尝试折叠组时,组的内容转移到封闭容器的顶部,然后组崩溃,但它的内容仍然持续大约一秒钟,直到它最终消失,我得到预期的结果 - 折叠的手风琴。

<div id="accordion" class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse">Title Here</a>
    </div>
    <div class="accordion-body collapse">
      <div class="accordion-inner">
        Content Here
      </div>
    </div>
  </div>
</div>

我也尝试过使用Bootstrap文档中的示例来排除我的CSS问题并仅使用他们的问题,但这产生了相同的结果。当实际组已经崩溃时,手风琴组的内容会持续大约一秒钟。

<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

我还尝试将手风琴组的内容缩减为单个文本字符串。问题仍然存在。

任何想法如何解决这个问题?

谢谢。

1 个答案:

答案 0 :(得分:0)

您可能需要降级回较旧的引导程序版本。如果您使用他们的任何演示作为开始。在升级框架之前,您应该从演示/模板的升级版本开始。通常,模板比bootstrap css更向后兼容。这很乏味。