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>