使用 jquery 在 WordPress 中切换帖子
我正在尝试做一些我以前在 WordPress 中从未见过的事情。基本上,当您到达博客时,会显示标题、缩略图和摘录。当按下切换按钮时,帖子应该向下滑动以显示内容。 ()
这是我的 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/ 按缩略图上的播放按钮可以切换!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以精简当前的代码并通过切换所有代码来解决问题,如下所示:
这会使用
.closest()
然后执行.find()
仅在 that.post
内获取.toggleSection
。然后切换代码可以压缩为.slideToggle()
打电话。上面的内容主要是使用当前元素$(this)
,然后使用 树遍历函数。You can slim down your current code and fix the issue with toggling all of them like 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.