jQuery 切换导航

Question

我正在尝试制作一个 Toogle 导航，当我单击以显示更多内容时，导航将从 5 扩展到最大数量。

代码如下:

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();
  });
});

第 5 行使 li 第 5 项之后的所有 itens 进行切换，但是当我单击第一个子项时，我该怎么办，只有这个 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/