【发布时间】：2025-12-22 06:00:06
【问题描述】：
我有一些 div 可以点击加号向下滑动。但是一个扩展的 div 扩展了另一个。我只需要点击 div 来推动空间和扩展。我试图设置包装和显示的溢出。现在我不知道该怎么做。有人能帮我吗？
Codepen 参考：https://codepen.io/nikolinjho/pen/jONYxmj
html:
<div class="container">
<div class="row">
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true">
</i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per
quarter</p>
<p class="font-6">– Free base level website hosting,
up to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-
Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per
quarter</p>
<p class="font-6">– Free base level website hosting, up
to 5 initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
<div class="col-sm-4 upon">
<p class="cust" style="">Lorem ipsum dolor sit amet
<i class="fa fa-plus-circle down" aria-hidden="true"></i>
</p>
<div class="hidden slid-own">
<p class="font-6">– Limited Projects approved per quarter</p>
<p class="font-6">– Free base level website hosting, up to 5
initial revisions prior to launch!</p>
<p class="font-6">– A great low-cost option for small
businesses & startups</p>
<p class="font-6">– SEO Optimized & Mobile-Friendly</p>
<p class="font-6">– Contains our Google Ads</p>
</div>
<p>consectetur adipiscing elit</p>
</div>
</div>
</div>
css:
<style type="text/css">
.cust {
display: flex;
align-items: center;
justify-content: space-between;
}
.fa-plus-circle, .fa-minus-circle {
cursor: pointer;
color: green;
}
.upon {
border: 1px solid #eadddd;
}
.upon p {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
.slid-own .font-6{
font-size: 12px;
text-transform: lowercase;
}
.hidden {
display: none;
}
</style>
js:
<script type="text/javascript">
$(".down").click(function () {
console.log($(this).parent().parent())
$(this).parent().parent().find(".slid-own").slideToggle();
$(".down").toggleClass("fa-minus-circle ");
})
</script>
如何处理？
【问题讨论】：
-
这是为同一行中的所有块设置相同高度的 flex 默认行为。您正在使用 bootstrap 4 及其纯粹创建 flex 结构。
标签： javascript html css