提问者:小点点

使用jquery阅读更多按钮


我有一个完整的内容。 当我点击按钮时,所有的块立即被完全显示,但是我只需要完全显示我在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();
  });
});

共2个答案

匿名用户

当您以.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();
  });
});
``