jquery - 扩展内容后如何为div设置最大高度？

Question

我已经为 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>

Answer 1

我这里只有 Bootstrap Version 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>