javascript - 如何在WordPress内容(single.php)中添加自动折叠/展开？

Question

有很多 WordPress 插件可以在 WordPress 内容中添加折叠/展开，例如 Collapse-O-Matic 。

但是有没有办法在 WordPress 内容中添加自动折叠/展开(single.php)？如果内容超过50字，其余部分将自动隐藏。

我在这里找到了教程:

http://shakenandstirredweb.com/240/jquery-moreless-text

但我无法使用它。有人可以帮忙吗？

Answer 1

这可能很旧，但我这样解决它，因为没有一个答案适合我:

HTML 和 PHP:

<span class="p-read-more"></span>
<?php the_content(); ?>
<a href="" class="read-more-link">Read More</a>

CSS:

.p-read-more+p {
    position: relative;
    overflow: hidden;
    max-height: 110px;
    height: auto;
    transition: max-height 1s linear;
}

.expand {
    max-height: 100% !important;
}

.read-more-link {
    display: block;
    max-width: 85px;
}

注意:110 像素的最大高度和 85 像素的宽度可能需要根据您的文本字体大小进行更改。

jQuery:

$(document).ready(function() {
    $(".read-more-link").click(function(e) {
        e.preventDefault();
        if ($(this).text() == "Read More") {
            $(this).parent().find(".p-read-more+p").addClass("expand");
            $(this).text("Read Less");
        } else {
            $(this).parent().find(".p-read-more+p").removeClass("expand");
            $(this).text("Read More");
        }
    });
});

这是我喜欢的 jQuery 的另一个变体

$(document).ready(function() {
    $(".read-more-link").click(function(e) {
        e.preventDefault();
        const myThis = $(this);
        if ($(this).text() == "Read More") {
            $(this).parent().find(".p-read-more+p").addClass("expand");
            const myTimeout = setTimeout(myReadLess, 500);
            function myReadLess() {
                myThis.text("Read Less");
            }
        } else {
            $(this).parent().find(".p-read-more+p").removeClass("expand");
            const myTimeout = setTimeout(myReadMore, 1100);
            function myReadMore() {
                myThis.text("Read More");
            }
        }
    });
});