2

我正在尝试制作一个工具导航，当我单击以显示更多时，导航将从 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 之后的所有项目都切换，但是当我点击第一个孩子时，我该怎么做，只有这个 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>
4

1 回答 1

2

试试这个...

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/

于 2012-04-23T18:11:32.650 回答