javascript - 在响应式网格中使用 slidetoggle 时如何防止其他 div 移动？

Question

我有一个响应式网格，在台式机/平板电脑上每行有 3 列。所述列中的每个 div 都有隐藏的内容，当使用 slideToggle 单击按钮时，这些内容可以垂直展开。我只希望它下面的 div 向下移动。但是，它下面的整行都向下移动。

这是我的 fiddle 和我正在使用的 JS: https://jsfiddle.net/6yz5okx3/

$( ".slidetoggle" ).click(function() {
  $(this).parent().parent().find( ".av_inner_wrapper" ).slideToggle();
});

如果您单击第一行中的第三个元素，您会看到 div 展开，但我只希望它直接向下推 div，而不是整行。有什么想法吗？

附言这是在 Wordpress 中，因此所有额外的 div 等都使用我正在使用的网格生成器放在其中。我对他们没有太大的灵 active 。

非常感谢任何帮助!

Answer 1

rnevius 的评论是正确的，你不能用你当前的系统做到这一点。

您可以尝试 CSS Columns 之类的东西。然而，CSS Column Support除了最新的浏览器版本之外，其他任何东西都是参差不齐的。

下面的代码片段演示了 CSS 列。

$( ".slidetoggle" ).click(function() {
  $(this).parent().parent().find( ".av_inner_wrapper" ).slideToggle();
});

.wrapper {
    width:100%;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 33%; /* Chrome, Safari, Opera */
    -moz-column-width: 33%; /* Firefox */
    column-width: 33%;
    -webkit-column-gap: 0; /* Chrome, Safari, Opera */
    -moz-column-gap: 0; /* Firefox */
    column-gap: 0;
}
.one-third {
    width:100%;
    padding:5px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid; column-break-inside:avoid;
    display:inline-block;
    overflow:auto;
}
.av_inner_wrapper {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 1</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 2</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 3</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 4</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 5</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
	<div class="one-third">
		<div>
			<div>
				<img src="http://placehold.it/100x100" />
			</div>
		</div>
		<div>
			<h3>Heading 6</h3>
		</div>
		<div class="av_inner_wrapper">
			<section>
				<div>
					<p>Lorem ipsum dolor sit amit lorem ipsum dolor sit amit lorem ipsum dolor sit amit</p>
				</div>
			</section>
		</div>
		<div class="av_inner_wrapper">
			<div>
				<button href="#">CTA</button>
			</div>
		</div>
		<div class="av_icon_outer_wrapper">
			<button class="slidetoggle">Click to Slide</button>
		</div>
	</div>
</div>