javascript - jQuery slideToggle 变得疯狂——为什么？

Question

我尝试在 Internet 上搜索解决方案，但没有真正找到任何有用的信息。
我正在构建一个 TwitchTV 应用程序(FreeCodeCamp 挑战赛)，我想做类似的事情:如果状态为在线 (.online)，我可以单击它，带有流媒体信息的面板 (.slide) 将向下滑动，然后如果我再次点击。
(编辑:
澄清一下:我有一些具有相同类的元素，但只想定位我单击的元素的同级元素。)
问题是，slideToggle 上下移动了几次(数量因元素而异)，我真的不知道为什么。我只能猜测它与类和 next() 有关:

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

你能帮忙吗？是什么导致这个面板疯狂地上下滑动？您对如何进行这项工作有一些建议吗？
我的代码笔是 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>