使用jQuery切换摘录和内容 [英] Toggle excerpt and content using jQuery

问题描述

我看过以下链接:使用jquery在wordpress中切换帖子不幸的是，我没有做我想做的事.我有一个自定义帖子类型.我想要的是带有阅读更多"链接的摘录.收到.但是我希望Read More链接可以切换/slideToggle文章中的全部内容.也有一个阅读较少"链接，该链接将返回到显示摘录.

I've seen this link: Toggle Posts in wordpress using jquery but it's unfortunately not doing what I want. I have a custom post type. What I want is to have an excerpt with "Read More" link. I got that. But I want the Read More link to toggle/slideToggle the full content within the article. Also have a "read less" link that will go back to showing the excerpt.

这是我正在使用的脚本...任何人都可以告诉我这是否太多.现在可以使用，但是我不知道是否有更简单的方法.

Here is the script I got working...can anyone tell me if this is too much. It works now, but I don't know if there is an easier way.

    $(function() {
    $('.content').hide()
  $('a.read').click(function() {
     $(this).closest('.tenant').find('.content').slideDown('fast');
     $('.excerpt').hide()
     return false;
  });
  $('a.read-less').click(function() {
     $(this).closest('.tenant').find('.excerpt').slideToggle('fast');
     $('.content').hide()
     return false;
  });
});

然后我的查询:

    <?php query_posts('post_type=tenants'); ?>
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <article class="tenant">
        <div class="tenant-header">
        <?php the_post_thumbnail('thumbnail', array('class' => 'left')); ?>

             <h1><?php the_title();?></h1>
            </div>
     <div class="excerpt"><?php the_excerpt(); ?><a href="" class="read">Read More</a>  </div>
     <div class="content"><?php the_content(); ?><a href="" class="read-less">Read Less</a></div>
     </article>

 <?php endwhile; ?>

再次 当有多个帖子时，您点击阅读更多"，其他帖子中的文本就会消失:-/所以我猜这几乎"是正确的代码

EDIT AGAIN: When multiple posts are in, and you hit "read more" the text from the other post disappear :-/ So i guess this "almost" the right code

推荐答案

是的，您已经关闭了，但是使用$('.excerpt').hide();将隐藏页面中所有类为excerpt的元素，这就是为什么您需要引用被单击的元素并查找的原因文章中要显示/隐藏的适当内容:

Yes you were close, but using $('.excerpt').hide(); will hide all elements in the page with class excerpt that's why you need to reference the clicked element and find the appropriate content inside the article to show/hide:

 $(function () {
     $('.content').hide();
     $('a.read').click(function () {
         $(this).parent('.excerpt').hide();
         $(this).closest('.tenant').find('.content').slideDown('fast');
         return false;
     });
     $('a.read-less').click(function () {
         $(this).parent('.content').slideUp('fast');
         $(this).closest('.tenant').find('.excerpt').show();
         return false;
     });
 });

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