Question

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

这是我的小提琴＆amp;我正在使用的JS： https://jsfiddle.net/6yz5okx3/

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

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

P.S。这是在Wordpress中，所以所有额外的div和＆amp;使用我正在使用的网格构建器将其放入其中。我对它们没有太大的灵活性。

非常感谢任何帮助！

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>

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

1 个答案: