2

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

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

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

我想要实现的目标：单击时 JQuery 幻灯片切换以显示/隐藏内容。只有单击的触发器应该显示其内容。

我遇到的问题：这是针对 JCINK 论坛上的 miniprofile 信息。每个帖子都会有一个迷你简介。我必须使用类名，而不是 ID（ID 是自动生成的，我实际上无法为每个帖子编号启动脚本）。但是，使用类名会使 miniprofile 的每个实例在单击时显示或隐藏。

我为解决这个问题所做的工作：清理堆栈溢出。我已经看到一些类似的问题得到了回答，但没有一个解决方案对我有用（很可能是由于用户失败。我不理解我所看到的所有答案，以及我可以包装的最简单的答案当我尝试合并它们时，头脑周围并没有像预期的那样工作）。

我最接近解决问题的是通过这个问题和答案

如果这不是一个好问题，我提前道歉。我对 HTML 和 CSS 很满意，但无论如何都不精通。Javascript 和 JQuery 完全超出了我的舒适区。这是我第一次尝试在 stackoverflow 上寻求帮助。请温柔一点。如果您能帮助我更好地表达它，我很乐意编辑我的问题。

4

1 回答 1

2

您的选择器太宽泛：$('.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/

于 2018-08-18T00:46:04.467 回答