0

削減する必要がある長い順序付けられていないリストがあり、表示領域に 10 個のアイテムを表示する必要があり、1 つの矢印ボタンをクリックすると、次の 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>

私は何をすべきか？

4

1 に答える 1

0

これをチェックしてください(依存する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();
            }
        }
    });
});
于 2013-09-06T09:49:54.020 に答える