jQuery slideToggle导致内嵌块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;
}