使用 jQuery 切换摘录和内容答案

【问题标题】：Toggle excerpt and content using jQuery使用 jQuery 切换摘录和内容
【发布时间】：2013-07-24 20:08:47
【问题描述】：

我看到了这个链接：Toggle Posts in wordpress using jquery，但不幸的是它没有做我想做的事。我有一个自定义帖子类型。我想要的是摘录“阅读更多”链接。我明白了。但我希望阅读更多链接来切换/滑动切换文章中的全部内容。还有一个“少读”链接，可以返回显示摘录。

编辑：这是我正在工作的脚本......谁能告诉我这是否太多了。现在可以了，不知道有没有更简单的方法。

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

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

【问题讨论】：

但是，您是否尝试修改过该代码？有用的指南：How to Ask
是的，大约 1.5 小时后我放弃了。 :( jQuery 不是我最擅长的技能。
没问题，但显示您的代码。指定 what 不起作用。并阅读documentation，那里有很好的例子。你可以edit这个问题。

标签： jquery wordpress toggle

【解决方案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;
     });
 });

【讨论】：