我有一组动态创建的div,其中可能包含几行内容。我们将输出限制为每行三列。使用jquery切换来切换div中的某些内容,我试图将每个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
A1切换B2 B3
B1 C2 C3
C1
最佳答案
如果您想将内容重叠到下一行,则可以position:absolute
类切换并相应地增加z-index