Question

我看过这个链接：Toggle Posts in wordpress using jquery但遗憾的是没有做我想做的事。我有自定义帖子类型。我想要的是摘录“阅读更多”链接。我明白了。但我希望Read More链接切换/ slideToggle文章中的完整内容。还有一个“少阅读”链接，将返回显示摘录。

编辑：这是我工作的脚本......任何人都可以告诉我这是不是太多了。它现在有效，但我不知道是否有更简单的方法。

    $(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; ?>

再次编辑：当多个帖子进入，你点击“阅读更多”时，其他帖子中的文字消失了： - /所以我猜这个“几乎”正确的代码

Answer 1

是的，你很接近，但是使用$('.excerpt').hide();将隐藏页面中包含类excerpt的所有元素，这就是为什么你需要引用被点击的元素并在文章中找到适当的内容来显示/隐藏：

 $(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切换摘录和内容

1 个答案: