0

我正在使用引导行，并为其提供更多应具有的跨度子项，因为我发现这有助于使网格正常工作，同时保持响应能力。

每个元素都有一个子元素，以及一个使用 jQuery 显示的元素，如下所示：

<div class="row">

<div class="span2">
    <div class="inner-element">
         Content here
         <div class="hidden-element">
               More content here
         </div>
    </div>
</div>
...

</div>

当点击内部的某个按钮时.span2，.hidden-elementdiv 会随之增长，slideDown();并且内部元素会获得一个position:absoluteCSS，因此它会越过下面的跨度并且不会改变网格。

.row当它在一个不在页面最右角（在's 角）的 .span2 元素中完成时，此设置工作得非常好

您可以在这个jsFiddle示例中看到这个问题。您可以看到单击“Example #1”可以正常工作，不会折叠父元素，而单击“Example #2”会使.span2元素折叠，使下一个.span2元素跳上一行。

这是什么原因，我该如何解决？

4

1 回答 1

1

显然问题在于.span2元素的height属性崩溃。在动画之前通过 JavaScript 综合设置高度就可以了，如这个 jsFiddle 示例所示。因此，制作动画的正确方法是：

var box = item.closest('.span2');

打开时：

box.css("height", box.height()+"px");

关闭时：

box.css("height", "auto");

这会强制父元素具有固定的高度并且不会折叠。

于 2013-04-17T15:44:14.173 回答