JQuery 加载更多按钮不显示它打算显示的内容

Question

我正在使用 tabletop.js 将内容从电子表格提取到我的网页，然后尝试使用 jQuery 隐藏部分内容以改善用户体验。但是，加载更多按钮没有显示我需要首先显示的预期内容。它隐藏了一切。

这是我的代码。请看一下。

https://codepen.io/ru-musngi/pen/YzKLdLG

$(function () {

    $(".cnt-text").slice(0, 5).show();

    $("#loadMore").on('click', function (e) {

        e.preventDefault();

        $(".cnt-text:hidden").slice(0, 5).slideDown();

        if ($(".cnt-text:hidden").length == 0) {

            $("#load").fadeOut('slow');

        }

        $('html,body').animate({

            scrollTop: $(this).offset().top

        }, 1500);

    });

});

Answer 1

感谢您的所有回答。我自己想通了一些东西。在CSS中，我只是用来:nth-child(n+6) 显示前五个结果！