2

クリックして詳細を表示すると、ナビが5から最大数のイテンスまで拡大するという、toogleナビを作成しようとしています。

コードは次のとおりです。

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 トグルのみをどのように行うことができますか。

HTML は次のとおりです。

<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 に答える