12

我正在尝试使用 Twitter Bootstrap 折叠组件来实现 100% 高度的手风琴，正如这个问题中所描述的那样。

我正在手动设置.accordion-inner元素的高度，如本答案中所述。

但是，我在展开/折叠面板时遇到了“有弹性”的行为。我已经从.accordion-inner元素中删除了所有填充/边距/边框以消除这种可能性。

它在 IE10 中最为明显，但该问题在 Chrome 中也很明显。

请参阅此示例。

有什么想法导致这种“跳跃”行为吗？

4

4 回答 4

13

聚会迟到了，但是：

我有一个类似的问题，并注意到如果我从折叠元素下方的元素中删除一个 margin-top，并用 padding-top 替换它，过渡是平滑的。

所以 - 检查相邻元素的边距，如果可能的话，尝试用填充替换它们。

于 2014-07-31T23:02:17.263 回答
3

我认为您看到的“跳跃”是由于 .collapse 类的 CSS 转换造成的。

如果您查看这个 SO 线程Turning off Twitter Bootstrap Navbar Transition animation，您可以看到如何使用覆盖 CSS 类“no-transition”来禁用转换。这不会一起停止动画，但它会加快它的速度，这样跳跃就不那么明显了......

添加no-transition到您的手风琴体元素..

<div id="collapseOne" class="accordion-body collapse in no-transition">

添加 CSS ..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

更新了 plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

于 2013-05-20T11:19:42.990 回答
0

HTML：

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS：

 .collapse.in{
    padding-bottom:5px;
 }
于 2015-05-02T18:33:35.880 回答
0

我遇到了这种奇怪的行为，手风琴会扩展到比实际可见内容大得多的高度，然后折叠（跳转）回实际可见内容高度。

事实证明，该面板的手风琴主体有一些空html元素，在我的情况下，它们是一些divs带有col-sm-4类的元素，而其中没有任何内容。一旦我将它们注释掉，这种跳跃行为就停止了。希望这可以帮助有类似问题的人。

于 2016-05-23T14:53:41.550 回答