Jquery slideToggle 导致白色 space with inline-block div

Question

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

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

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

accordionContent.slideToggle(250);

但它也滑下了它旁边的城市 header，造成了一大片白色 space 区域。有没有办法只将 div 滑动到所选 div 下方？

这是一个jsfiddle

Answer 1

您可以在 CSS 中将垂直对齐设置为 top 以保持另一个 header 的位置：

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

EXAMPLE 1

或

您可以将内容设置为 position: absolute，这样它就会脱离容器：

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

EXAMPLE 2

Answer 2

不太确定您想要它的外观。但一个简单的解决方法是添加 vertical-align: top;

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

Answer 3

我认为您将不得不为此设置两个单独的列，然后：

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

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

您需要移动即将恢复原顺序的内容。

如果您要生成此内容，则需要两个循环，一个用于赔率，另一个用于偶数。

Jquery slideToggle 导致白色 space with inline-block div

Jquery slideToggle causing white space with inline-block divs

html

javascript

css

jquery

slidetoggle