Question

我正在尝试在砌体样式的画廊中在帖子的the_excerpt和the_content之间切换，但这会影响到每个帖子，而不仅仅是单击的帖子。

<div class="card-columns">
   <?php
$postCases = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'cases',
    'orderby' => 'title',
    'order' => 'ASC'
));

    while ($postCases->have_posts()) {
    $postCases->the_post(); 
?>

   <div class="card">
      <img class="card-img-top" src="<?php the_post_thumbnail_url(); ?>">
      <div class="card-body">
         <h4 class="card-title section-subtitle text-center"><?php the_title(); ?></h4>
         <p class="card-text excerpt"><?php the_excerpt(); ?></p>
         <p class="text-center read more"><i class="fas fa-plus-circle"></i></p>
         <p class="case-content"><?php the_content(); ?></p>
     </div>
   </div>
<?php }
wp_reset_postdata();
?>
</div>

$(document).ready(function() {
  $(".read").click(function() {
    $('.case-content').slideToggle('slow');
  });
});

每当单击.read时，都应该切换该特定帖子的the_content。相反，它也会切换所有其他内容。我该如何解决？

Answer 1

首先隐藏内容。

<style>
.case-content{
    display:none;
}
</style>

您可以使用next功能。单击“阅读更多”按钮时，找到所选元素的下一个具有“ case-content”类的兄弟并应用Toggle。

喜欢。

 $(".read").on('click', function() {
    $(this).next('.case-content').slideToggle('slow');
  });

在砌体风格的画廊中切换the_excerpt和the_content

1 个答案: