javascript - Jquery slideToggle 导致带有内联 block 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;
}

EXAMPLE 1

或

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

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

EXAMPLE 2