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/

jQuery Toggle Nav

1 个答案: