Question

我正在使用Twitter bootstrap。我想要实现的是，当有很多页面在分页内放置“...”按钮时，每次用户点击它时，再向分页容器添加5个页面。

看看http://jsfiddle.net/sqd12tr3/如您所见，有58页。我想要实现的是显示5页和...按钮。当我点击它再添加5页。所以在最后，当它达到58 ...按钮消失时。另一件事是，例如，如果第10个li处于活动状态，则默认情况下必须显示活动li之前的页面（li s）。

我怎样才能获得这个结果？

Answer 1

我发现这很有趣。谢谢发帖。我在<li>的末尾添加了class='ellipses' <ul>并使用了以下jQuery：

var pages = $('.pagination li').not('.ellipses');
var pagesVisible = 0;
var show = function(numToShow) {
    numToShow += 1;
    $('.pagination li').removeAttr('style');
    $('.pagination li:nth-child(n + ' + numToShow + ')').not('.ellipses').hide();

    var hiddenPages = $('.pagination li[style="display: none;"]');
    if (hiddenPages.length === 0)
    {
        $('.ellipses').remove();
    }
    pagesVisible = pages.length - hiddenPages.length;
};

$('.ellipses').click(function() {
    show(pagesVisible + 5);
});

var activePage = $('.pagination li.active').index();
var numToShow = activePage + (5 - (activePage % 5));
show(numToShow);

在JSFiddle上查看此DEMO。

jQuery隐藏分页元素

1 个答案: