展开/折叠摘录和内容 [英] Expand/collapse excerpt and content

问题描述

建立一个简单的WordPress博客，该博客仅包含一个页面.但是我遇到了一个问题，我想切换摘录，内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需重新加载页面或将蜂鸣发送到单个帖子页面.我知道之前曾有人问过这个问题，但这些示例都不适合我.只是希望有一个简单的显示/隐藏功能来自动显示摘录，当用户单击显示更多"时，整个帖子幻灯片会打开以显示完整的内容，而当他们单击显示更少"时，帖子就会回到摘录.我尝试了大多数在堆栈上的内容，但没有任何效果，因此现在我回滚到原始文件以重新开始.因此，正如您在循环定制文件中一样，此脚本现在不执行任何操作.但这是我尝试过的.

Setting up a simple WordPress blog, that only contains a single page wich is the blog archive. But i have run in to a problem, i want to have a toggle the excerpt and content show more/show less functionality, så that visitors easy can go trough the posts on the same page without page reloads or beeing sent to the single post page. I know this has been asked here before but none of those examples works for me. Just want a simple show/hide functionality to show the excerpt automatic and when users click show more, the whole post slides open to show complete content, and when they click show less, the post goes back to excerpt. I tried most that is here on stack but nothingworks so now i rolled back to my original files to start over. So this script does nothing right now as you se in the loop-custom file. But this is what i have tried.

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

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

And here is my loop-custom file:

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

推荐答案

在 fiddle 中进行测试后，答案已更新a>.

Answer updated after testing in 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的其他行，如下所示:

Further comment asking about changing "read more" button text on click - requires additional line of jQuery, like so:

  $('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 此处.

jsfiddle here.

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

这篇关于展开/折叠摘录和内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！