FAQ页面。 '少阅读'选项内容,JQuery问题

时间:2016-02-12 08:57:24

标签: javascript jquery wordpress

我在wordpress中有一个常见问题解答页面。我想添加read moreread less选项。 Read more工作正常,但我在read less时遇到了一些问题。

点击后,阅读更多内容展开。比我点击阅读更少内容保持不变。我需要内容回到较短的版本上阅读。

提前致谢

<div class="moreExpandWrapp">
    <div class="moreExpandContent" id="aboutExpand">
         <?php the_content(); ?>
    </div>
</div>

Jquery的

    $(".moreExpandContent").each(function () {
        var s = $(this).html(),
            self = $(this);
        if (s.split(' ').length > 100) {
            self.html(s.split(' ').slice(0, 100).join(' ') + " ... " + '<div class="read-more-bg"><a href="#" class="read-more">Read more</a></div>');

            self.find('a.read-more').click(function () {
                self.html((s) + "" + '<div class="read-more-bg"><a href="#" class="read-less">Read less</a></div>');
            })

            self.find('a.read-less').click(function () {
                self.html(s.split(' ').slice(0, 100).join(' ') + " ... " + '<div class="read-more-bg"><a href="#" class="read-more">Read more</a></div>');
            })
        }
    });

0 个答案:

没有答案