2017-10-21 30 views
3

J'ai essayé de rechercher sur Internet la solution, mais je n'ai pas vraiment trouvé quelque chose d'utile. Je construis une application TwitchTV (défi FreeCodeCamp) et je veux faire quelque chose comme ça: si le statut est en ligne (.online), je peux cliquer dessus et un panneau (.slide) avec des informations de streaming va glisser vers le bas, puis vers le haut si je clique à nouveau.
(EDIT:
Pour clarifier. J'ai quelques éléments avec la même classe, mais veulent cibler seulement le frère de celui que je clique)
Le problème est, slideToggle monte et descend quelques fois (le nombre est différent en fonction de l'élément), et je ne sais pas vraiment pourquoi. Je peux seulement deviner que ça a quelque chose à voir avec les classes et next():jQuery slideToggle devient fou - pourquoi?

$(".online").on("click", function() { 
    $(this).next(".slide").slideToggle("slow"); 
}); 

Pouvez-vous aider un peu? Qu'est-ce qui fait que ce panneau glisse de haut en bas comme un fou? Avez-vous quelques conseils sur la façon de faire ce travail?
Mon codepen est https://codepen.io/Strzesia/pen/PJVjbR/

Répondre

1

utilisé $(this).nextUntil('.slide').next().slideToggle("slow");

$(".online").on("click", function() { 
 
    $(this).nextUntil('.slide').next().slideToggle("slow"); 
 
});
.slide{width:400px;height:100px;background-color:pink;margin:5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="online">click</div> 
 
<div></div> 
 
<div></div> 
 
<div class="slide"></div> 
 

 
<div class="online">click</div> 
 
<div></div> 
 
<div class="slide"></div>

+0

Il peut travailler dans des circonstances différentes, mais le problème est, j'ai quelques éléments avec la classe « en ligne » et même nombre d'éléments avec la classe "slide". Peu importe si j'utilise next() ou nextAll(), l'élément "slide" glisse de haut en bas et encore et encore. – Strzesia

+0

J'ai édité le code. Veuillez réessayer. –

+0

Je suppose que quelque chose ne va pas avec mon code, car votre réponse fonctionne ici, mais pas sur mon codepen. Merci pour votre aide de toute façon! – Strzesia