使用jquery垂直调整包裹的div切换
问题描述：
我有一组动态构建的div，可能包含多行内容。我们将输出限制为每行三列。使用jQuery切换来切换div内的一些内容，我试图移动下面的每个div（以垂直方式）以允许读取切换元素的空间。我已尝试使用此以下标记：使用jquery垂直调整包裹的div切换
<script type="text/javascript">
$(".trigger").click(function() {
var trigger = $(this);
$(this).next(".toggle").slideToggle();
});
</script>
<div id="toggleContainer">
<div>
<h3 class="trigger">Trigger 1</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 2</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 3</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 4</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 5</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 6</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 7</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 8</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class="trigger">Trigger 9</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
</div>
另外，在this拨弄
这是移动各下方右边的元件的，以允许观看内容切换的证明。我的问题是：如何将内容向下移动到下一行而不将行移到右侧？这里是什么，我试图完成一个例子：
A1 A2 A3
B1，B2，B3
C1，C2，C3
和A1的点击，状态的B1和C1应该是：
A1 A2 A3
A1toggle B2 B3
B1 C2 C3
C1
答
如果要重叠到下一行的内容，可以position:absolute类切换并增加z-index相应
答
你可以简单地考虑你正在整理你的内容的方式。您可以水平排列它们垂直，而不是让你有这样的事情：
$(".trigger").click(function() {
var trigger = $(this);
$(this).next(".toggle").slideToggle();
});div#toggleContainer {
width: 100%;
display: flex;
justify-content: space-evenly;
}
div.content {
flex: 0 0 33%;
}
h3 {
font-size: 2em;
position: relative;
cursor:pointer;
}
.toggle {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggleContainer">
<div class="content">
<h3 class="trigger">Trigger 1</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 4</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 7</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div class="content">
<h3 class="trigger">Trigger 2</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 5</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 8</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div class="content">
<h3 class="trigger">Trigger 3</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 6</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
<h3 class="trigger">Trigger 9</h3>
<ul class="toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
</div>我也为了更好地安排元素使用flex。
对不起，我不清楚。我希望将受影响的列向下移动，而不是向右移动。这甚至有可能吗？我玩过这个位置：在切换列表上进行绝对调整，但它重叠了下面的内容（我试图避免的）。 – mrjones 2013-05-08 14:52:26