Jquery slideToggle 导致带有内联块 div 的空白答案

【问题标题】：Jquery slideToggle causing white space with inline-block divsJquery slideToggle 导致带有内联块 div 的空白
【发布时间】：2015-01-20 00:36:43
【问题描述】：

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

<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

【问题讨论】：

为什么没有单独的列？

标签： javascript jquery html css slidetoggle

【解决方案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

【讨论】：

我喜欢vertical-align: top;将标题保持在相应“行”的顶部。但它仍然会导致内容中的空白问题。是获得我正在寻找的使用表格的唯一方法吗？
不创建空格的唯一方法是使用示例 2，其他任何内容（在文档流中）都会将这些标题向下推。 @AarronH
如何改变文档的流向来达到我想要的效果？ @jmore009
@AarronH 使用 position: absolute 从文档流中删除元素。您在示例 2 中看到内容是如何滑过其他标题的？它不会将它们向下推，因为它没有被识别为文档流中的元素。
我把这个设置为答案，因为我决定去的位置：绝对路线。谢谢@jmore009

【解决方案2】：

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

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

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

您需要将内容转移到原来的顺序。

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

【讨论】：

我真的很喜欢这种方式，因为它看起来非常适合静态大小的网站。但是如果我需要它来响应，因为列数可以根据屏幕大小而变化，我可以实现这一点吗？
嗯，这很棘手。您也许可以使用脚本来检测媒体查询产生的列数，然后重新分配它们之间的卡片，可以这么说。这个库wicky.nillia.ms/enquire.js 看起来可以很方便地对更改做出反应。

【解决方案3】：

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

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

【讨论】：