使用jQuery在WordPress中切换帖子 [英] Toggle Posts in wordpress using jquery

问题描述

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

I am trying to do something I have not seen before in wordpress. Basically, when you arrive at the blog, a title, thumbnail and an excerpt is displayed. When a toggle button is pushed, the post should slide down to reveal the content. (<?php the_content(); ?>)

这是我的Jquery:

Here is my 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循环:

It works perfectly! However; because the toggle is placed within the wordpress loop, whenever the toggle button is pressed, all of the posts toggle open. For instance, If I have 10 posts on a page, and one toggle button is clicked, all of the toggles open. Here is my WP loop:

<?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循环内都是唯一的，并且只显示该条目的内容.有什么想法吗?

What you are seeing above, is that when span.play a is clicked, the togglesection slides down and reveals the content. When any single toggle is selected, all of the content appears. I would like it so each toggle is unique within the WP loop, and only reveals that entry's content. Any ideas?

到目前为止，您可以在这里看到我的作品演示: http://vitaminjdesign.com/littlewindow/按下缩略图上的播放按钮进行切换！

You can see a demo of my work so far here: http://vitaminjdesign.com/littlewindow/ Press the play button over the thumbnails to toggle!

推荐答案

您可以精简当前代码，并通过像这样切换所有代码来解决该问题:

You can slim down your current code and fix the issue with toggling all of them like this:

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

使用 .closest() 转到.post元素，然后执行 .find() 只能在那个 .post内部获得.toggleSection.然后，可以将切换代码压缩为 .slideToggle() 调用.上面的内容围绕使用当前元素$(this)，然后使用

This goes up to the .post element using .closest() then does a .find() to get the .toggleSection only inside that .post. Then the toggle code can be condensed down to just a .slideToggle() call. The above centers around using the current element, $(this), then traversing to find the element(s) you're after using the tree traversal functions.

这篇关于使用jQuery在WordPress中切换帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！