我的折疊 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;}其余的造型只是對實際設計的微小改變，所以感覺沒有必要視覺參考圖片：
1 回答
智慧大石
TA貢獻1946條經驗 獲得超3個贊
問題是.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"
? 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/[email protected]/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>
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消