Question

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

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

“更多”按钮不会将您带到其他位置，只需在页面内工作。

由于

Answer 1

只能在页面中 ...显示隐藏的<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();
});

它可以工作，但文本可能来自数据库，然后您无法设置这样的标记。让我们做另一个步骤，使其更容易（仅限于纯文本，但也可以修复以使用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));
        });;
});

HTML - 更好地利用'继续阅读'

1 个答案: