php - 使用 jquery 在 WordPress 中切换帖子

Question

我正在尝试做一些我以前在 WordPress 中从未见过的事情。基本上，当您到达博客时，会显示标题、缩略图和摘录。当按下切换按钮时，帖子应该向下滑动以显示内容。 (<?php the_content(); ?>)

这是我的 Jquery:

$(document).ready(function() {
          $('span.play a').click(function() {
               if ($('.toggleSection').is(":hidden"))
               {
                    $('.toggleSection').slideDown("slow");
               } else {
                    $('.toggleSection').slideUp("slow");
               }
               return false;
          });
     });

效果非常好!然而;因为切换被放置在 wordpress 循环中，所以每当按下切换按钮时，所有帖子都会切换打开。例如，如果我在一个页面上有 10 个帖子，并且单击一个切换按钮，则所有切换都会打开。这是我的 WP 循环:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                <div class="post" id="<?php the_ID(); ?>">
                    <div class="thumbnail">
                       <?php the_post_thumbnail( 'mainimg' ); ?>
                        <span class="play"><a href="#" onclick="jQuery('#comments').toggle();"><img src="<?php echo bloginfo('template_url'); ?>/images/play.png" width="30" height="36" alt="Play Video"></a></span>
                    </div>


                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <h3>Posted in: <span><?php the_category(', ') ?>  </span>On: <span><?php the_time('l, F jS, Y') ?></span></h3>

                    <div class="entry">
                        <p><?php the_excerpt(); ?> </p>   
                    </div> <!-- entry -->

                    <div class="toggleSection">
                    <p><?php the_content(); ?> </p>
                    </div>



                </div> <!-- .post -->

              <?php endwhile; ?>

您在上面看到的是，当单击 span.play a 时，切换部分会向下滑动并显示内容。当选择任何一个切换时，所有内容都会出现。我希望每个切换在 WP 循环中都是唯一的，并且只显示该条目的内容。有什么想法吗？

您可以在这里查看我迄今为止的工作演示:http://vitaminjdesign.com/littlewindow/按缩略图上的播放按钮进行切换!

Answer 1

您可以精简当前的代码并通过切换所有代码来解决问题，如下所示:

$(function() {
  $('span.play a').click(function() {
     $(this).closest('.post').find('.toggleSection').slideToggle();
     return false;
  });
});

使用 .closest() 上升到 .post 元素然后执行 .find()仅在that .post 内获取.toggleSection。然后切换代码可以压缩为 .slideToggle()称呼。上面的内容主要是使用当前元素 $(this)，然后使用 tree traversal functions 遍历查找您要查找的元素。 .