我有一个完整的内容。 当我点击按钮时,所有的块立即被完全显示,但是我只需要完全显示我在php上点击的块
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="content"><?php the_content(); ?></div>
<button class="show-more">Show more</button>
<?php endwhile; ?>
CSS
.content { max-height: 20px; overflow: hidden; }
.show-more { margin-top: 15px; }
jQuery
jQuery(document).ready(function() {
jQuery('.show-more').click(function() {
jQuery('.content').css('max-height', 'none');
jQuery(this).remove();
});
});
当您以.content
为目标时,您将选择该类中的所有元素。 您可以切换到ID选择器或使用。prev()仅选择上一个元素:
jQuery(this).prev(".content").css('max-height', 'none');
还应删除溢出:隐藏
:
jQuery(this).prev(".content").css({'max-height':'none','overflow':'auto'});
查找最近的.content
试试这个
jQuery(document).ready(function() {
jQuery('.show-more').click(function() {
jQuery(this).closest('.content').css({'max-height':'none','overflow':'auto'});
jQuery(this).remove();
});
});
``