如何在博客上添加“加载更多”按钮？

Posted 2023-03-05

【中文标题】如何在博客上添加“加载更多”按钮？

【英文标题】：How to add "load more" button on blogger?

【发布时间】：2016-05-06 14:06:23

【问题描述】：

我想在博客页面上添加一个“加载更多”按钮。我找到了this exemple。但我不知道将每个部分的代码放在博客上的哪里（html / CSS / javascript），尤其是这个jQuery部分代码。

$(function()
    $("div").slice(0, 10).show(); // select the first ten
    $("#load").click(function(e) // click event for load more
        e.preventDefault();
        $("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
        if($("div:hidden").length == 0) // check if any hidden divs still exist
            alert("No more divs"); // alert if there are none left
        
    );
);

【问题讨论】：

提供的示例一次加载所有内容并一次显示十个项目。我怀疑这是您想要的效果，我认为您可能希望使用 Ajax 实时加载帖子。

感谢您的评论。实际上，这就是我想做的，我不想一次显示所有内容以避免页面很长，我想创建一个每次点击时显示更多内容的按钮，我想做在特定页面上而不是在帖子的主页上。

【参考方案1】：

我找到了解决方案，这段代码就是我想要的

    <div>content content content content content content content content content content content content content content content.<a href="javascript:void(0);" onclick="jQuery('.show-more-toggle').toggle();" class="show-more-toggle v5-dark-link">show more</a><span class="show-more-toggle" style="display: none">more more more more more more more more more more more more more more more more more </span></div>