扩展/崩溃摘录和内容

Question

设置一个简单的WordPress博客，仅包含单个页面是博客存档。但是我已经遇到了一个问题，我想为摘要和内容显示更多/显示较少功能，访问者轻松就可以在同一页面上贴上帖子而没有页面上的帖子或发送到单个邮政页面的beeing。我知道这以前曾在这里提出过，但这些示例都不适合我。只需要一个简单的显示/隐藏功能即可显示自动摘录，并且当用户单击显示更多时，整个帖子幻灯片打开以显示完整的内容，当他们单击少时，较少的帖子会返回摘录。我尝试了最多的堆栈上，但是什么都没有工作，所以现在我回到了原始文件以重新开始。因此，此脚本现在没有在循环custom文件中使用。但这就是我尝试的。

这是我的JS：

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

这是我的索引文件：

    <div id="content">
    <div id="inner-content" class="row">
        <main id="main" class="large-8 medium-8 columns" role="main">           
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <!-- To see additional archive styles, visit the /parts directory -->
                <?php get_template_part( 'parts/loop', 'custom' ); ?>
            <?php endwhile; ?>  
                <?php joints_page_navi(); ?>
            <?php else : ?>
                <?php get_template_part( 'parts/content', 'missing' ); ?>
            <?php endif; ?>
        </main> <!-- end #main -->
        <?php get_sidebar(); ?>
    </div> <!-- end #inner-content -->
</div> <!-- end #content -->

这是我的循环custom文件：

<article class="post" id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">                 
<header class="article-header">
    <?php get_template_part( 'parts/content', 'byline' ); ?>
    <h2><?php the_title(); ?></h2>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('full'); ?></a>

    <?php the_excerpt('<button class="tiny">' . __( 'Show more...', 'jointswp' ) . '</button>'); ?>
</section> <!-- end article section -->

Answer 1

编辑：在小提琴中测试后更新的答案。

<div class="post-wrap">
    <h2>The Title</h2>
    <div class="post">
        <div class="excerpt">
            Excerpt goes here
        </div>
        <div class="whole-post">
            Slidey read more content goes here
        </div>
        <a href="#" class="read">Read More</a>
    </div>
</div>

.whole-post {
  display: none;
}
.post {
  position: relative;
  padding-bottom: 50px;
}
a.read {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

$('a.read').click(function () {
     $(this).siblings('.excerpt').slideToggle(500);
     $(this).siblings('.whole-post').slideToggle(500);
});

进一步的评论询问有关更改"阅读更多"按钮文本的单击 - 需要其他jQuery行，例如：

  $('a.read').click(function () {
      $(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
      $(this).siblings('.excerpt').slideToggle(500);
      $(this).siblings('.whole-post').slideToggle(500); 
  });

jsfiddle在这里。

注意：三元query ? truthy : falsey ;语法是if (query) { truthy } else { falsey } ;

Answer 2

您可以尝试使用此插件：https：//wordpress.org/plugins/wp-showhide