Comment procéder pour afficher l'élément de paragraphe le plus proche d'un lien unique avec jQuery?

Question

Le titre est un peu rouillé, désolé à ce sujet. Maintenant, laissez-moi vous expliquer ce que j'essaie de faire.

J'ai quelques éléments de cette liste, comme ceci:

<li> 
    <a id="toggle" class="0"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a> 
    <p id="meddel" class="0">text</p> 
</li> 

<li class='odd'> 
    <a id="toggle" class="1"><h4>test<small>2010-04-17 kl 15:01</small></h4></a> 
    <p id="meddel" class="1">test meddelande :) [a]http://youtube.com[/a]</p> 
</li> 

La fonction i essaie d'atteindre, est que lorsqu'un utilisateur clique sur un lien « bascule » (le texte h4), je veux la élément de paragraphe ci-dessous pour fondre. J'ai pensé à l'idée de donner à la fois le lien et le paragraphe de la même classe, et en quelque sorte le faire obtenir le paragraphe avec la même classe que le lien toggle cliqué, et le montrer? Mais je ne suis pas tout à fait sûr de savoir comment faire ça non plus, et ça ne ressemble pas à la meilleure idée, mais c'est peut-être le seul moyen? Je ne sais pas ...

Existe-t-il un moyen de simplement obtenir le paragraphe le plus proche (en dessous du lien) avec l'identifiant "meddel" et de l'afficher en fondu? Cela semble un peu plus facile ...

J'espère que vous pouvez au moins me donner quelques conseils. Merci à l'avance, -Nike

Answer 1

Vos identifiants doivent être uniques, je donnerais vos liens une classe, comme ceci:

<li> 
    <a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a> 
    <p>text</p> 
</li> 

<li class='odd'> 
    <a class="toggle"><h4>test<small>2010-04-17 kl 15:01</small></h4></a> 
    <p>test meddelande :) [a]http://youtube.com[/a]</p> 
</li> 

Ensuite, vous pouvez simplement faire ceci:

$(function() { 
    $("a.toggle").click(function() { 
    $(this).next("p").animate({ opacity: 'toggle'}); 
    }); 
}); 

Sur n'importe quel clic de <a class="toggle"> cela trouvera le prochain <p> et fondu le bascule. En outre, les classes ne peuvent pas commencer avec un nombre, assurez-vous de ne pas le faire pour des résultats prévisibles.

Answer 2

Essayez ceci:

$(function(){ 
    $('a.toggle, a.toggle h4').toggle(function(){ 
     $(this).next().fadeOut('slow'); 
    }, function(){ 
     $(this).next().fadeIn('slow'); 
    }); 
}); 

Donnez vos liens un class au lieu de id.

Answer 3

$("h4").click(function() { 
    var p = $(this).siblings("p"); 
    if (p.is(":hidden")) { 
    p.fadeIn(); 
    } else { 
    p.fadeOut(); 
    } 
}); 

Un problème: vos ancres ont le même ID. Ils ne devraient pas. Les identifiants devraient être uniques.