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

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;
}

Jquery slideToggle导致带有内联块div的空格

3 个答案: