我的折叠 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;
}
其余的造型只是对实际设计的微小改变,所以感觉没有必要
视觉参考图片:
智慧大石