jQuery 加载更多内容 div

Question

我正在尝试使用 jQuery 来隐藏一大块 div 并使用一个按钮来显示更多。

但是，由于我的 div 是内联块，因此它们没有被隐藏。

只应显示前 8 个 div，其余部分应隐藏。

一旦我开始工作，我将处理显示按钮。

类似于本网站上的旧帖子按钮：https : //melodydemo.wordpress.com/

这是我用于隐藏和显示 div 的 jQuery：

$(function () {
    $("div").slice(0, 8).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 8).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
    scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
         $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});    

这是我尝试的代码笔：

https://codepen.io/kastex/pen/RowYLL

Answer 1

使用 Jsfiddle 实时查看

使用 codepen 实时查看

您需要添加和删除的内容

删除了 CSS： 从div样式

display: inline-block;

和

添加 CSS : 添加带有display类的新样式。

div.display {
    display: inline-block;
}

JavaScript：

删除了 JS : 从第 2 行和第 3 行开始。

.show(); & .slideDown();

和

添加 JS： 添加此行号 2 和 3 两者。

.addClass('ClassName')

display: inline-block;

div.display {
    display: inline-block;
}

.show(); & .slideDown();