Jquery slide切换导致带有内联块 div 的空格

Question

>我有一个内联显示的城市列表。

<div class="accordion-container">
    <a href="#" class="accordion-toggle">Rome</a>
    <div class="accordion-content">
        <p>..</p>
    </div>
</div>

选择城市的标题时，使用slideToggle，我显示该城市的一些信息。

accordionContent.slideToggle(250);

但它也会沿着旁边的城市标题滑下，造成一个大的空白区域。 有没有办法只将div 滑动到所选div 下方？

这是一个jsfiddle

Answer 1

您可以在 CSS 中将垂直对齐设置为top，以将另一个标头保留在原处：

.accordion-container {
    width: 49%;
    margin: 0 0 20px;
    clear: both;
    display: inline-block;
    vertical-align:top;
}

例 1

或

您可以将内容设置为 position: absolute，以便它脱离其容器：

.accordion-content {
    background: #FFF;
    display: none;
    padding: 20px;
    overflow: auto;
    position: absolute;
    z-index: 2;
}

例 2

Answer 2

我认为您必须为此设置两个单独的列：

.accordion-container {
    margin: 0 0 20px;
    display: block;
}
.column {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

http://jsfiddle.net/cone06kr/10/

您需要更改内容以使其恢复到原始顺序。

如果你正在生成这些内容，你将需要两个循环，一个用于赔率，另一个用于偶数。

Answer 3

不太确定你希望它看起来如何。但是一个简单的解决方法是增加vertical-align: top;

.accordion-container {
    width: 49%;
    margin: 0 0 20px;
    clear: both;
    display: inline-block;
    vertical-align: top;
}