隔离jQuery切换多个按钮

Question

我如何在JQuery slideToggles中使用类名，但只能切换单击的触发器？

超级简单的布局模型： JSFiddle here

$(document).ready(function() {
$('.togbar').on('click', function() {
$('.togcon').slideToggle('slow');
$('i', this).toggleClass('fa-angle-up');
});
});

我要实现的目标：单击jQuery幻灯片可切换为显示/隐藏内容。只有单击的触发器才能显示其内容。

我遇到的问题：这是有关JCINK论坛上的微型个人资料的信息。每个帖子上都会有一个微型头像。我必须使用类名，而不是ID（ID是自动生成的，并且我不能为每个帖子号实际启动脚本）。但是，使用类名称会使miniprofile的每个实例在单击时显示或隐藏。

我为解决该问题所做的事情：清理堆栈溢出。我已经看到了一些类似的问题的答案，但是没有一个解决方案对我有用（很可能是由于用户失败。我不明白我所看到的所有答案，也不能理解我能包装的最简单的答案）当我尝试将它们合并时，周围的思想并没有按预期工作。）

我最接近解决此问题的方法是通过this question & answer

  

如果这不是一个好问题，我事先表示歉意。我对HTML和CSS很满意，但是一点都不精通。 Javascript和JQuery完全超出了我的舒适范围。这是我第一次尝试寻求关于stackoverflow的帮助。请保持温柔。如果您可以帮助我更好地表达它，我很乐意编辑我的问题。

Answer 1

您的选择器范围太广：$('.togcon')正在使用该类名称获取页面上的所有内容。因此，您也要对所有它们都执行.slideToggle('slow')方法。

您可以使用siblings()选择器将其保留在单击的.togbar元素的上下文中。

https://api.jquery.com/siblings/

示例：

$(document).ready(function() {
  $('.togbar').on('click', function() {

    // $(this) is a reference to the specific .togbar element that was clicked.
    // .siblings('.togcon') gets the element at the same level as the .togbar with the class='togcon'
    $(this).siblings('.togcon').slideToggle('slow');
    $('i', this).toggleClass('fa-angle-up');
  });
});

更新的小提琴： http://jsfiddle.net/zf7b0e9m/