Utilisation de Jquery slideToggle sur une grande liste d'éléments individuels

J'ai une grande liste imbriquée que j'essaye d'animer en utilisant jquery slideToggle. Je souhaite que les listes imbriquées individuelles (id = "imbriqué" + compteur) soient animées séparément, afin qu'un utilisateur puisse basculer une liste pour afficher/masquer sans affecter les autres. L'animation serait déclenchée par le lien "trigger_Nested" (+ counter) correspondant. Cependant, il y aura environ 75 listes imbriquées, et je ne veux pas avoir à lister individuellement chaque paire d'ancres et de listes.Utilisation de Jquery slideToggle sur une grande liste d'éléments individuels

Je pense qu'il y a probablement un moyen très simple de faire cela de façon dynamique en utilisant le compteur, mais je suis un novice en Javascript et je ne peux pas le comprendre. Le js que j'ai ci-dessous bascule toutes les listes en même temps, ce qui n'est pas ce que je veux.

Toute aide est appréciée, Merci!

<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>

Source

2010-06-21 Bobby K

Vous pouvez modifier votre sélection dans le gestionnaire .click() utiliser this et trouver le <ul> relativement, comme ceci:

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

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

You can view a quick demo here, cela va de l'élément que vous avez cliqué (puis <a>) et trouve c'est .siblings() qui correspondent au sélecteur (le <ul> dans ce cas), et slideToggle est seulement celui-là.

Source

2010-06-21 02:35:38

Parfait, merci! –

Que diriez-vous de la liste indentée à deux niveaux ??

<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>

Source

2011-12-22 14:57:01

Utilisation de Jquery slideToggle sur une grande liste d'éléments individuels

Répondre

Questions connexes