jqueryを使用してナビゲーションメニューの一部を表示していない問題

Question

リスト項目が多い水平ナビゲーションメニューがあります。私は5つのアイテムだけを表示し、残りを隠したいと思う。次に、ナビゲーションメニューの両端に左右の矢印ボタンを追加します。クリックすると、次の5つのリスト項目が表示されます。

<ul> 
    <li><a href="#">List item 1</a></li> 
    <li><a href="#">List item 2</a></li> 
    <li><a href="#">List item 3</a></li> 
    <li><a href="#">List item 4</a></li> 
    <li><a href="#">List item 5</a></li> 
    <li class="hide"><a href="#">List item 6</a></li> 
    <li class="hide"><a href="#">List item 7</a></li> 
    <li class="hide"><a href="#">List item 8</a></li> 
    <li class="hide"><a href="#">List item 9</a></li> 
    <li class="hide"><a href="#">List item 10</a></li> 
</ul> 

何か助けていただきありがとうございます。

Answer 1

それを試してみてください。

HTMLコード

<ul id="list"> 
    <li><a href="#">List item 1</a></li> 
    <li><a href="#">List item 2</a></li> 
    <li><a href="#">List item 3</a></li> 
    <li><a href="#">List item 4</a></li> 
    <li><a href="#">List item 5</a></li> 
    <li><a href="#">List item 6</a></li> 
    <li><a href="#">List item 7</a></li> 
    <li><a href="#">List item 8</a></li> 
    <li><a href="#">List item 9</a></li> 
    <li><a href="#">List item 10</a></li> 
</ul> 
<input type="button" name="prev" value=" prev " /> 
<input type="button" name="next" value=" next " /> 

のJavaScriptコード

var list = $('#list li'); 
reset(); 

function reset() { 
    step = 5; // number of list items to show (by removing hidden class) 
    current = 0; 

    for (i=0; i< list.length; i++) { 
     if (i >= step) { $(list[i]).addClass('hidden'); } 
     else $(list[i]).removeClass('hidden'); 
    } 
} 

$('input[name="next"]').live('click', function() { 

    current += step; 
    threshold = current + step; 
    if (threshold > list.length-1+step) { current -= step; threshold = list.length; } 
    for (i=0; i < list.length; i++) { 
     if ((i >= current) && (i < threshold)) { $(list[i]).removeClass('hidden'); } 
     else $(list[i]).addClass('hidden'); 
    } 
}); 
$('input[name="prev"]').live('click', function() { 
    current -= step; 
    threshold = current + step; 
    if (current < 0) { reset(); threshold = current + step; 
    } 
    for (i=0; i < list.length; i++) { 
     if ((i >= current) && (i < threshold)) { $(list[i]).removeClass('hidden'); } 
     else $(list[i]).addClass('hidden'); 
    } 
});