隔离 jquery 切换多个按钮

Question

如何将 class 名称与 JQuery slideToggles 一起使用，但只切换点击的触发器？

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

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

我想要实现的目标： JQuery 单击时滑动切换到 show/hide 内容。只有单击的触发器才会显示其内容。

我遇到的问题： 这是 JCINK 论坛上的 miniprofile 信息。每个 post 上都会有一个 miniprofile。我必须使用 class 名称，而不是 ID（ID 是自动生成的，实际上我无法为每个 post 号码启动脚本）。但是，使用 class 名称会使迷你配置文件的每个实例在单击时显示或隐藏。

我为解决问题所做的工作： 已清除堆栈溢出。我已经看到一些类似的问题得到了回答，但是 none 的解决方案对我有用（很可能是由于用户失败。我不理解我看到的所有答案，以及最简单的答案当我尝试合并它们时，我可以全神贯注于没有按预期工作）。

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

I apologize in advance if this is not a good question. I'm comfortable with HTML and CSS, but not proficient by any means. Javascript and JQuery are entirely out of my comfort zone. This is my first attempt to ask for help on Whosebug. Please be gentle. I'm happy to edit my question if you can help me phrase it better.

Answer 1

您的选择器过于宽泛：$('.togcon') 正在获取页面上具有 class 名称的所有内容。因此，您也在对所有这些对象执行 .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');
  });
});

已更新Fiddle： http://jsfiddle.net/zf7b0e9m/

隔离 jquery 切换多个按钮

isolating jquery toggle multiple buttons

jquery

slidetoggle

如何将 class 名称与 JQuery slideToggles 一起使用，但只切换点击的触发器？