当内容显示在第二个盒子下面时,在盒子容器中,我希望它被移动到最左边,在两个盒子下面,如果我有多个盒子,在多行上,内容应该放在与点击框同一行的所有框下方,这是我目前所拥有的:
$('.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>
关于javascript - 在切换时显示/隐藏子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58820066/