我为div添加了相同的高度。扩展内容后，我需要将所有div的高度设置为相同的高度。
但是在我扩展了这些div之后，将高度文本和BG切除。我可以动态增加较大元素的高度吗？如果是，那么如何？
请参见下面的代码以更好地理解。
$(document).ready(function() {
$('.clicktoexpand').click(function() {
$(this).find('i').toggleClass('fa-minus-circle');
$(this).parent('.choosebot').find('.areaexpand').slideToggle();
});
});.whychooseus {
padding: 80px 0 0;
}
.choosetop {
text-align: left;
}
.choosetop .icon {
position: relative;
z-index: 10;
float: left;
margin: 0 15px 0 0;
}
.choosetop .ic-txt {
overflow: hidden;
}
.choosetop .ic-txt h4 {
font-size: 18px;
line-height: 22px;
color: #fff;
font-weight: 700;
}
.choosetop.iconholder-1 {
border-radius: 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 20px 25px;
}
.choosetop.iconholder-1:hover {
background-color: #104a9b;
}
.choosetop.iconholder-1:hover:after {
background: url(../images/pat.png) repeat 0 0;
background-size: 100% auto;
opacity: 0.2;
}
.choosebot {
padding: 20px;
background-color: #ececec;
position: relative;
text-align: center;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.choosebot p {
color: #7f7f7f;
font-size: 14px;
line-height: 18px;
}
.choosebot:after {
background: url(../images/pat.png) repeat 0 0;
background-size: 100% auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
opacity: 0.4;
}
.areaexpand {
display: none;
}
.choosebot p,
.choosebot a {
position: relative;
z-index: 10;
}
.choosebot a.clicktoexpand {
font-size: 22px;
color: #00cde7;
}<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="whychooseus">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="choosebot">
<p> For our customers,this is key. When we say we will deliver <span class="areaexpand">
something,we mean it. <br><br>We have tried and tested,industry leading in-house processes that ensure you get nothing but the best in customer service from us. <br><br>Our services are backed up with SLAs and guarantees, and most importantly,we understand our accountability. </span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="choosebot">
<p> Communication: It's not just what we do, it's how we <span class="areaexpand">operate. <br><br>We keep you informed at all times,and our technical support teams a responsive and personable. Most Importantly, you can trusl lhat they havo tho knowledge to resolve any issues quickly Our oxportise puts us in the ideal position to be your single point of contact for all your voice and data needs.</span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="choosebot">
<p>Our in-house engineers and support staff are all Industry <span class="areaexpand">accredited and qualified. <br><br>Our Account Managers also know their stuff, meaning we continue to support you fully after your solution has bean delivered. making rocommondations for improvements and keeping you aware of new technologies that might help your business succeed rurther. </span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="choosebot">
<p>We don't Just mean commercially, although we will<span class="areaexpand">always strive to deliver solutions that are cost effective. <br><br>We also mean the value we bring to your business communications solution:our trustworthiness.our considerable knowledge and our reliability at all times.</span> </p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我这里仅提供Bootstrap版本4的解决方案。 同时切换所有可扩展区域。
$(document).ready(function() {
$('.clicktoexpand').click(function() {
$(this)
.closest('.row')
.find('.areaexpand')
.slideToggle()
.end()
.find('.clicktoexpand')
.find('i')
.toggleClass('fa-minus-circle')
.toggleClass('fa-plus-circle');
});
});.whychooseus {
padding: 80px 0 0;
}
.choosetop {
text-align: left;
}
.choosetop .icon {
position: relative;
z-index: 10;
float: left;
margin: 0 15px 0 0;
}
.choosetop .ic-txt {
overflow: hidden;
}
.choosetop .ic-txt h4 {
font-size: 18px;
line-height: 22px;
color: #fff;
font-weight: 700;
}
.choosetop.iconholder-1 {
border-radius: 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 20px 25px;
}
.choosetop.iconholder-1:hover {
background-color: #104a9b;
}
.choosetop.iconholder-1:hover:after {
background: url(../images/pat.png) repeat 0 0;
background-size: 100% auto;
opacity: 0.2;
}
.choosebot {
padding: 20px;
background-color: #ececec;
position: relative;
text-align: center;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.choosebot p {
color: #7f7f7f;
font-size: 14px;
line-height: 18px;
}
.choosebot:after {
background: url(../images/pat.png) repeat 0 0;
background-size: 100% auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
opacity: 0.4;
}
.areaexpand {
display: none;
}
.choosebot p,
.choosebot a {
position: relative;
z-index: 10;
}
.choosebot a.clicktoexpand {
font-size: 22px;
color: #00cde7;
}<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="whychooseus">
<div class="container">
<div class="row">
<div class="col-md-3 d-flex">
<div class="choosebot">
<p> For our customers,this is key. When we say we will deliver <span class="areaexpand">
something,we mean it. <br><br>We have tried and tested,industry leading in-house processes that ensure you get nothing but the best in customer service from us. <br><br>Our services are backed up with SLAs and guarantees, and most importantly,we understand our accountability. </span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3 d-flex">
<div class="choosebot">
<p> Communication: It's not just what we do, it's how we <span class="areaexpand">operate. <br><br>We keep you informed at all times,and our technical support teams a responsive and personable. Most Importantly, you can trusl lhat they havo tho knowledge to resolve any issues quickly Our oxportise puts us in the ideal position to be your single point of contact for all your voice and data needs.</span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3 d-flex">
<div class="choosebot">
<p>Our in-house engineers and support staff are all Industry <span class="areaexpand">accredited and qualified. <br><br>Our Account Managers also know their stuff, meaning we continue to support you fully after your solution has bean delivered. making rocommondations for improvements and keeping you aware of new technologies that might help your business succeed rurther. </span></p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="col-md-3 d-flex">
<div class="choosebot">
<p>We don't Just mean commercially, although we will<span class="areaexpand">always strive to deliver solutions that are cost effective. <br><br>We also mean the value we bring to your business communications solution:our trustworthiness.our considerable knowledge and our reliability at all times.</span> </p>
<a class="clicktoexpand" href="javascript:void(0);"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>