jQuery slideToggle發瘋 - 爲什麼？

Question

我試圖在互聯網上搜索解決方案，但我還沒有發現任何有用的東西。我正在構建一個TwitchTV應用程序（FreeCodeCamp挑戰），我想做出類似這樣的事情：如果狀態爲在線（.online），我可以點擊它並通過流信息將面板（.slide）滑動如果我再次點擊，然後向上。
（編輯：
爲了澄清：我與同班的幾個元素，但想要的目標只有一個我點擊的兄弟姐妹）
的問題是，的slideToggle上升和下降了幾次（這個數字取決於元素的不同），我不知道爲什麼。我只能猜測它是與類和next（）：

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

你能幫一點？是什麼讓這個面板像瘋了一樣上下滑動？你有關於如何使這項工作的一些提示？
我codepen是https://codepen.io/Strzesia/pen/PJVjbR/

Answer 1

使用$(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>