Question

我有一个长的无序列表，必须减少，每次必须在可见区域中看到10个项目，并通过单击一个箭头按钮显示下面的10个项目。类似于this image。

每列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

Check this out（这取决于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();
            }
        }
    });
});

切换无序列表

1 个答案: