javascript - 展开/折叠摘录和内容

Question

设置一个简单的 WordPress 博客，仅包含一个页面，即博客存档。但我遇到了一个问题，我想要切换摘录和内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需页面重新加载或被发送到单个帖子页面。我知道以前已经有人问过这个问题，但这些例子都不适合我。只是想要一个简单的显示/隐藏功能来自动显示摘录，当用户单击“显示更多”时，整个帖子幻灯片会打开以显示完整的内容，当他们单击“显示更少”时，帖子将返回摘录。我尝试了堆栈中的大部分内容，但没有任何效果，所以现在我回滚到原始文件以重新开始。因此，正如您在循环自定义文件中看到的那样，该脚本现在不执行任何操作。但这是我尝试过的。

这是我的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 -->

这是我的循环自定义文件:

<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

编辑:在 fiddle 中测试后更新了答案.

<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 here .

注意:三元 查询 ? true : falsey ; 语法是 if (query) { truey } else { falsey } ;

的缩写