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。

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

的缩写

Answer 2

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

展开/展开摘录和内容

2 个答案: