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>

标签： jqueryhtmlcss

Answer 1

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