在切換時顯示/隱藏子 div

Question

當內容顯示在第二個盒子上時，放在盒子下面，在盒子容器中，我希望它移動到最左邊，在兩個盒子下面，如果我有多個盒子，在多行上，內容應該放在在與單擊框同一行的所有框下方，這是我到目前為止所擁有的：

 $('.show').click(function() { $(this).parent().parent().find('.content').slideToggle(); $(this).parent().parent().siblings().find('.content').slideUp('fast'); });

 .site-container { max-width: 1200px; }.container { display: flex; flex-wrap: wrap; }.box { width: 200px; height: 100px; border: 2px solid red; margin: 0 50px 20px 0; }.box-container { width: 250px; }.content { width: 1200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="site-container"> <div class="container"> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> </div> </div>

https://codepen.io/tonyart/pen/VwwBzbP

Answer 1

嘗試這個

 $('.show').click(function(){ $(this).parent().parent().find('.content').slideToggle(); $(this).parent().parent().siblings().find('.content').slideUp('fast'); });

 .site-container { max-width:1200px; }.container { display:flex; flex-wrap:wrap; position:relative; }.box { width:auto; height:100px; border:2px solid red; margin:0 50px 20px 0; }.box-container { width:20%; }.content { width:1200px; position: absolute; left: 10px; bottom: -10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="site-container"> <div class="container"> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> </div> </div>