水平折叠仅扩展 1 个元素而不是全部

Question

我的折叠 div 有问题，如果我展开一个展开另一个展开，我不想要这种类型的功能，而是只展开一个我想知道是否有人可以帮我解决一下代码。我尝试去掉实际 jq 上的高度设置器，然后添加一个max-height:none;对于活动类，然后只需添加活动类，以便它只需要所需的高度，但它不起作用JQvar coll = document.getElementsByClassName("collapsible");var i;for (i = 0; i < coll.length; i++) {  coll[i].addEventListener("click", function() {    this.classList.toggle("active");    var content = this.nextElementSibling;    if (content.style.maxHeight){      content.style.maxHeight = null;    } else {      content.style.maxHeight = content.scrollHeight + "px";    }   });}html<div class="row mg-top-m immune-blog mg-bot-10">  <?php     $products = new WP_Query(array('post_type' => 'post', 'posts_per_page'=>'3', 'order_by' => 'post_date', 'order' => 'DSC'));    if($products->have_posts()) : while ($products->have_posts()) : $products->the_post();    ?>  <?php $back = do_shortcode("[types field='im-back' output='raw'][/types]") ?>  <div class="col-lg-3 immune-collapse" style="background-image: url(<?php echo $back ?>)">    <?php the_post_thumbnail(); ?>    <h3 class="immune-blog-title">      <?php the_title(); ?>    </h3>    <button class="collapsible"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>    <div class="content">      <?php  echo (types_render_field( 'blog-list', array() )); ?>    </div>  </div>  <?php  endwhile; endif; wp_reset_postdata(); ?></div>CSS.immune-blog .content {  padding: 0 18px;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;}.collapsible{  background-color: transparent;  border: none;  padding:10px;  margin-top: 40px;}其余的造型只是对实际设计的微小改变，所以感觉没有必要视觉参考图片：

Answer 1

问题是.row有display: flex. Flexbox 的特点是 Flexbox

使容器的所有子项占用相同数量的可用宽度/高度，无论可用的宽度/高度有多少。

因此，当其中一个孩子长大时，其余孩子也会变高。

一个可能的解决方案是在 html 结构中添加一个级别，并将具有背景颜色的元素向下移动，这样它就不会成为 的子元素，因此.row将根据其内容保持其高度。

例如：

<div class="col-lg-3"><!-- moved the background and class to a deeper level 👇 -->

  <div class="immune-collapse" style="background-color:orange;">

    <h3 class="immune-blog-title">Immunity is not seasonal</h3>

    <button class="collapsible">+</button>

    <div class="content">

      <p>At the end of summer when that first nip is in the air, it marks the start of cold and flu season. During our

        lifetime we<br>

        experience an average of 200 colds – that’s 5 years of coughs, congestion, headaches and sore throats. 7a

        Children could<br>

        have 3-8 cold infections a year, and adults 2-4 colds annually. 8a These are caused by viral infection of the

        upper respiratory<br>

        tract.</p>

    </div>

  </div>

</div>

var coll = document.getElementsByClassName("collapsible");

var i;

for (i = 0; i < coll.length; i++) {

  coll[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var content = this.nextElementSibling;

    if (content.style.maxHeight){

      content.style.maxHeight = null;

    } else {

      content.style.maxHeight = content.scrollHeight + "px";

    } 

  });

}

.immune-blog{

    justify-content: center;

}

.immune-collapse{

    margin:15px;

    text-align:center;

    padding: 65px;

    background-size: cover;

    background-position: bottom;

    border-radius: 500px;

}

.immune-collapse img{

    max-width:250px;

    max-height:250px;

    border-radius:50%;

}

.content {

     padding: 0 18px;

     max-height: 0;

     overflow: hidden;

     transition: max-height 0.2s ease-out;

}

.collapsible{

    background-color: transparent;

    border: none;

    padding:10px;

    margin-top: 40px;

}

.immune-blog h3{

    font-family: 'Pangolin';

    color:white;

    font-size:35px;

}

.fa-plus-circle{

    color: white;

    background: none;

    font-size:50px;

}

.immune-blog .content ul{

    text-align:start;

    font-family: 'Pangolin';

    color:white;

}

.immune-blog .content ul li{

    margin:5px;

}

.immune-blog .content p{

    font-size:15px!important;

    color:White;

    font-family: 'Pangolin'!important;

    text-align:center!important;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"

  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"

  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

  integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="row">

  <div class="col-lg-3">

    <div class="immune-collapse" style="background-color:orange;">

      <h3 class="immune-blog-title">Immunity is not seasonal</h3>

      <button class="collapsible">+</button>

      <div class="content">

        <p>At the end of summer when that first nip is in the air, it marks the start of cold and flu season. During our

          lifetime we<br>

          experience an average of 200 colds – that’s 5 years of coughs, congestion, headaches and sore throats. 7a

          Children could<br>

          have 3-8 cold infections a year, and adults 2-4 colds annually. 8a These are caused by viral infection of the

          upper respiratory<br>

          tract.</p>

      </div>

    </div>

  </div>

  <div class="col-lg-3">

    <div class="immune-collapse" style="background-color:blue;">

      <h3 class="immune-blog-title">FOOD TIPS FOR PICKY

        EATERS</h3>

      <button class="collapsible">+</button>

      <div class="content">

        <p>Are you battling to get your child to eat a balanced diet? Have mealtimes become a power struggle between you

          and<br>

          your child? Try some of these tips to help a picky eater get a balanced meal.</p>

      </div>

    </div>

  </div>

  <div class="col-lg-3">

    <div class="immune-collapse" style="background-color:maroon;">

      <h3 class="immune-blog-title">WHAT CAN YOU DO

        TO

        KEEP YOUR IMMUNE SYSTEM HEALTHY?</h3>

      <button class="collapsible">+</button>

      <div class="content">

        <ul>

          <li>Eat plenty of fruits, vegetables, and whole grains</li>

          <li>Exercise regularly</li>

          <li>Get enough sleep</li>

          <li>Try and avoid infection, e.g. by frequent hand washing and</li>

          <li>cooking meat thoroughly</li>

          <li>Keep up with vaccinations including the flu vaccine for</li>

          <li>those at risk</li>

          <li>Maintain a healthy weight</li>

          <li>Drink alcohol in moderation</li>

          <li>Don't smoke</li>

          <li>Try to reduce your stress</li>

        </ul>

      </div>

    </div>

  </div>

</div>