移除手风琴弹出的奇怪故障

Question

好了，我遇到了一个奇怪的问题:

• 我正在使用一个手风琴小部件(几乎100%的原始引导代码)
• 当折叠项(菜单)展开时，看起来好像需要一段时间才能恢复原来的形状。

为什么?

请看这里:http://83.212.101.132/betdk/home/three

并尝试展开(点击标题):足球/世界杯2013菜单项在左边的Categories侧边栏。为什么会这样呢?

(在主"Top Matches"框中展开手风琴项时也会发生完全相同的事情)。

欢迎任何建议!: -)

Answer 1

出现此问题是因为您在类的顶部和底部添加了padding。accordion-body:

.accordion-body {
    padding-bottom: 10px;
    padding-top: 10px;
}

动画完成后，浏览器会添加额外的填充，所以你有这个小故障。

要解决这个问题，你只需要删除。accordion-body的样式，并添加:

.accordion-inner{margin: 10px 0;}

Answer 2

尝试在下面的代码中添加您的标题和ul - li，并检查它是否适合您。

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

检查http://getbootstrap.com/javascript/collapse-examples