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

Question

我的折叠 div 有问题，如果我展开一个展开另一个展开，我不想要这种类型的功能，而是只展开一个

我想知道是否有人可以帮我解决一下代码。

我尝试去掉实际 jq 上的高度设置器，然后添加一个max-height:none;

对于活动类，然后只需添加活动类，以便它只需要所需的高度，但它不起作用

JQ

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";

    } 

  });

}

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>