jquery - 切换无序列表

Question

我有一个长长的无序列表，必须减少，每次必须在可见区域中显示 10 个项目，然后单击一个箭头按钮显示下一个 10 个项目。像这样的图像。

每一列的 HTML 代码是这样的：

<li class="linkcat"><h2>Main Title</h2>
    <ul class="xoxo blogroll">
     <li><a href="#">Title 1</a></li>
     <li><a href="#">Title 2</a></li>
     <li><a href="#">Title 3</a></li>
     ...
     <li><a href="#">Title 4</a></li>
    </ul>
</li>

我应该怎么办？

Answer 1

检查一下（这取决于css，因此请确保正确使用它），此外，您可能会为此找到更好的插件，这可能不是最好的，但只是一种克服无聊的方法，因为我是免费的。

$(function(){
    var visible_items = 10, vi = visible_items;
    $('li.linkcat ul li, #prev, #next').hide();
    $('li.linkcat ul li').each(function(i){
        if(i < vi) $(this).addClass('visible').show();
        if(i > vi) {
            $('#next').show();
            return false;
        }
    });

    $('#next').click(function(){
        var lastLi = $('li.visible:last');
        if(lastLi.next('li').length){
            $('li.linkcat ul li.visible').removeClass('visible').hide();
            for(var ind=(lastLi.index()+1), i = ind; i < (ind+vi); i++){
                $('li.linkcat ul li').eq(i).show().addClass('visible');
            }
            $('#prev').show();
            if(!$('li.linkcat ul li').eq(lastLi.index()+(vi*2)).length){
                $('#next').hide();
            }
        }
    });

    $('#prev').click(function(){
        var firstLi = $('li.visible:first');
        if(firstLi.prev('li').length){
            $('li.linkcat ul li.visible').removeClass('visible').hide();
            for(var ind=(firstLi.index()-1), i = ind; i > (ind-vi); i--){
                $('li.linkcat ul li').eq(i).show().addClass('visible');
            }
            $('#next').show();
            if($('li.linkcat ul li').eq((vi-1)).is(':visible')) {
                $('#prev').hide();
            }
        }
    });
});