4

jquery slideToggleを使用してアニメーション化しようとしている大きなネストされたリストがあります。個々のネストされたリスト (id="Nested" + counter) を個別にアニメーション化して、ユーザーが他のリストに影響を与えずにリストの表示/非表示を切り替えることができるようにします。アニメーションは、対応する「trigger_Nested」(+ カウンター) リンクによってトリガーされます。

ただし、約 75 個のネストされたリストが存在することになるため、アンカーとリストの各ペアを個別にリストする必要はありません。

おそらく、カウンターを使用してこれを動的に行う非常に簡単な方法があると思いますが、私はJavascriptの初心者なので、それを理解できません。私が以下に持っているjsは、すべてのリストを同時に切り替えますが、これは私が望むものではありません.

どんな助けでも大歓迎です、ありがとう!

<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

   $(document).ready(function(){

     $("ul[id|=Nested]").hide();

     $("a[id|=trigger_Nested]").click(function() {
       $("ul[id|=Nested]").slideToggle("fast");
       return false;
       });
   });

</script>
</head>

<body>

<ul id='TopLevel-List'>

   <li><a href=# id='trigger_Nested-0'>Top Level 1</a>

   <ul id='Nested-0' >
      <li><a href=#>Item 1</li>
      <li><a href=#>Item 2</li>
   </ul>
   </li>

   <li><a href=# id='trigger_Nested-1'>Top Level 2</a>

   <ul id='Nested-1'>
      <li><a href=#>Item 3</a></li>
      <li><a href=#>Item 4</a></li>
      <li><a href=#>Item 5</a></li>
   </ul>
   </li>

</ul>

</body>
4

2 に答える 2

1

.click()次のように、ハンドラー内のセレクターを変更して、相対的に使用thisおよび検索できます。<ul>

$(function(){
  $("ul[id|=Nested]").hide();

  $("a[id|=trigger_Nested]").click(function() {
    $(this).siblings("ul").slideToggle("fast");
    return false;
  });
});

ここで簡単なデモを表示できます。これは、クリックした要素 (次に<a>) から移動.siblings()し、セレクター (<ul>この場合は ) と一致するものを見つけ、slideToggle の唯一のものです。

于 2010-06-21T02:35:38.287 に答える
0

2レベルのインデントリストはどうですか??

<ul id="TopLevel-List">
<li><a href=# id="trigger_Nested-0">Top Level 1</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-0' >
  <li><a href=# id='trigger_Nested-1'>Top Level 2</a>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
      <ul id-'Nested-1'>
          <li><a href='#'>Item 1</a></li>
          <li><a href='#'>Item 2</a></li>
          <li><a href='#'>Item 3</a></li>
      </ul>
  </li>  
</ul>
</li>
</ul>
于 2011-12-22T14:57:01.573 に答える