jQuery切換導航

Question

我triyng做一個谷歌瀏覽器，當我點擊顯示更多時，導航將從5擴展到最大數量的itens。

下面的代碼：

jQuery(document).ready(function(){ 

    jQuery("#nav-sidebox > li > a:first-child").removeAttr("href"); 
    jQuery("#nav-sidebox > li > a:first-child").css("cursor", "pointer"); 
    jQuery("#nav-sidebox > li > ul > li:nth-child(5)").nextUntil("ul").slideToggle(); 

    jQuery("#nav-sidebox > li > a:first-child").click(function(){ 
    jQuery("#nav-sidebox > li > ul > li:nth-child(5)").nextUntil("ul").slideToggle(); 
    }); 
}); 

第五行使所有itens裏第5項後切換，但我該怎麼辦時，我點擊第一個孩子，僅此UL切換。

這裏的HMTL：

<ul id="nav-sidebox"> 
    <li> 
    <a>Click to toggle</a> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
    <li> 
    <a>Click to toggle</a> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
</ul> 

Answer 1

嘗試......

HTML（我剛添加文字的項目，所以我可以看到發生了什麼）......

<ul id="nav-sidebox"> 
    <li> 
    <a>Click to toggle</a> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
    </ul> 
    </li> 
    <li> 
    <a>Click to toggle</a> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
     <li>d</li> 
     <li>e</li> 
     <li>f</li> 
    </ul> 
    </li> 
</ul>​ 

jQuery ...

$(document).ready(function(){ 
    $("a").css("cursor", "pointer"); 
    $("li:nth-child(5)").nextUntil("ul").slideToggle(); 

    $("a").click(function(){ 
     $(this).parent().find("li:nth-child(5)").nextUntil("ul").slideToggle(); 
    }); 
});​ 

您可以看到在這個jsFiddle的結果... http://jsfiddle.net/Xm8Vt/