使用jquery垂直調整包裹的div切換

Question

我有一組動態構建的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

A1toggle B2 B3

B1 C2 C3

C1

Answer 1

如果要重疊到下一行的內容，可以position:absolute類切換並增加z-index相應

Answer 2

你可以簡單地考慮你正在整理你的內容的方式。您可以水平排列它們垂直，而不是讓你有這樣的事情：

$(".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。