HTML -更好地使用“继续阅读”

Question

在HTML中是否有一种方法可以在博客文章的中间添加一个“继续阅读”链接，该链接可以显示文章的其余部分而不转到另一个页面。例如，读者按下“继续阅读”，其余的文章就会出现在下面，而不必加载文章。

示例：https://www.goodreads.com/book/show/6404873-penelope-and-the-preposterous-birthday-party

“更多”按钮不会把你带到其他地方，只会在页面中工作。

谢谢

Answer 1

只是在page...showing内部工作，这是一个隐藏的<span> (这将使它的<div>容器增加其高度)。

一个非常简单的实现(我将使用jQuery)是：

<div>
    This is a very long post. You read only first paragraph
    but there is much more.
    <a href="#" id="expand-post">Continue reading</a>
    <span id="extra-text" style="display: none">
        You see? I had much more to say about this topic.
    </span>
</div>

使用此JavaScript：

$("#expand-post").click(function () {
    $(this).hide();
    $("#extra-text").show();
});

现在我们可以做得更好，这段代码很容易变得更通用。让我们一步一步地做。首先，考虑到这样的一般结构，让我们删除那些丑陋的ID：

<div>
    Preview text.<a href="# class="expand-post">Continue reading</a>
    <span style="display:none">Complete text.</span>
</div>

假设<span>元素总是在<a>元素之后单击，则可以获得相同的结果：

$(".expand-post").click(function () {
    $(this).hide().next().show();
});

它可以工作，但是文本可能来自DB，那么您就不能像这样设置标记。让我们再做一步，使它更容易(仅限于纯文本，但它也可以修复与HTML )。实际上，您不需要使用以下标记手动拆分文本：

<div class="split-text">
    This is a very long text. You'll see a preview only but with a simple
    click you can read the full text. As you can see it can be done with
    few JavaScript lines. 
<div>

这个JavaScript将得到相同的结果(预览文本长度设置为32，但这是任意的，请注意这是完全未经测试的)：

$(".split-text").each(function (index, element)) {
    var fullText = $(this).text();
    far previewText = fullText.substr(0, 32);

    $(element).empty()
        .append($("<span>").text(previewText)).one("click", function () {
            $(this).replaceWith($("<span>").text(fullText));
        });;
});