我有一组动态创建的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

10-05 20:53
查看更多