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/