Question

我正在侧边栏中设置一个带有简短新闻摘录的Wordpress网站，其中有一个jQuery read more按钮，可以直接显示帖子的其余部分，而无需链接到另一个页面。我们的目标是让阅读更顺畅 - 比现在更容易下滑。我的主要问题是将发布分为两个部分，从WP角度来看，一个摘录字段和一个内容字段（其余部分），将不够用户友好。因此我现在使用以下代码：

            $(function () {
             $('.content').hide();
             $('a.read').click(function () {
                 $(this).parent('.excerpt').hide('fast');
                 $(this).closest('.article-jquery').find('.content').slideDown('fast');
                 return false;
             });
             $('a.read-less').click(function () {
                 $(this).parent('.content').slideUp('fast');
                 $(this).closest('.article-jquery').find('.excerpt').slideDown('fast');
                 return false;
             });
         });

和

    <article id="post-<?php the_ID(); ?>" class="article-jquery">   

    <h2 class="front-small-header" id="<?php the_ID(); ?>"><?php the_title(); ?></h2>

        <div class="excerpt">
        <?php echo wp_trim_words( get_the_content(), 15 ); ?><a href="" class="read">Read More</a>
        </div>
        <div class="content">
        <?php the_content(); ?><a href="" class="read-less">Read Less</a>
        </div>

</article>

你可以清楚地看到摘录的第一个块消失，而新的部分重复的部分滑过它。有没有办法让所有这些更平滑/看起来不奇怪？

提前致谢

Answer 1

您可以使用hide "complete" argument确保在开始下一个动画之前完成一个动画。这可能会稍微整理一下。

$('a.read').click(function () {
    $(this).parent('.excerpt').hide('fast', function() {
        $(this).closest('.article-jquery').find('.content').slideDown('fast');
        return false;
    });
});

Answer 2

我不确定我是否理解这个解决方案，但这是我自己解决的方法。

删除元素“.excerpt”。
将内容的lineheight设置为好的，例如2.2。然后“.content”的最大高度为8.8，溢出：隐藏。这将为我们提供4行文字。

点击read-more时，我们删除了max-height。

CSS

.content {
    line-height: 2.2em;
    max-height: 8.8em;
    overflow: hidden;
}

的jQuery

// Let's trigger all elements that has a class that starts with "read-"
$('[class^="read-"]').on('click',function(){
    // Since .content is .read-more's parent, lets take the parent()
    // And use slideToggle instead of checking if element is open or closed
    $(this).parent().slideToggle();
});

标记

<article id="post-<?php the_ID(); ?>" class="article-jquery">   

    <h2 class="front-small-header" id="<?php the_ID(); ?>"><?php the_title(); ?></h2>

    <div class="content">
        <?php the_content(); ?><span class="read-more">Read More</span>
    </div>

</article>

WP + jquery阅读更多，更顺畅的滑动/替换？

2 个答案: