[英]Show/hide child div on toggle
当内容显示在第二个盒子上时,放在盒子下面,在盒子容器中,我希望它移动到最左边,在两个盒子下面,如果我有多个盒子,在多行上,内容应该放在在与单击框同一行的所有框下方,这是我到目前为止所拥有的:
$('.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>
尝试这个
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.