jQuery toggleClass以正确的元素为目标

尝试学习jQuery，并专门切换类

目标：加载具有设置高度的div并隐藏溢出。。。单击一个元素以显示整个分区。就像手风琴一样，但内容的顶部显示。。。单击将显示其余部分

这是jQuery（因为我在WPress工作，所以jQuery不是$）

这是我的

我需要帮助理解两件事：

为什么要将类“clipactive”添加到单击的元素中？“this”不是指上面一行中的“clip”吗？我怎样才能达到目标？同级（）>

为什么当我切换类时，“clip”得到一个内联样式“display:none”

这与“这”没有被正确定位有关吗

如注释中所述，

jQuery（this）

指的是单击的元素

jQuery（'.clip'）.toggle（）

将切换

.clip

类，这意味着它将显示或隐藏元素，无论它不是哪个元素。因此，它将从<代码>显示：无将其隐藏，并

显示：块以显示它

我想这就是你想要的代码：

jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery('.clip').toggleClass('clipactive');
    return false;
});

为什么要将类“clipactive”添加到单击的元素中？“this”不是指上面一行中的“clip”吗？我怎么得到它 目标？同级（）>

---

此

引用click绑定到的元素

我之所以说“绑定到”，是因为您可以将一个

作为单击的

.openup

的子对象，但是

这个
不会指向
，它会指向
.openup
，因为您将事件绑定到它。有关事件处理的更多信息，请访问

您可以通过几种不同的方式获得对
.clip
的引用，下面我将展示使用
数据-
的代码，这样您就可以定义一个选择器来选择要定位的元素：

HTML:

$（this）.data（'target'）
（这是指单击的元素）获取
data target
的值，这是我们想要定位的类，然后我们用
$（）
包装它，这样jQuery将通过提供的选择器获取元素
$（$（this.data（'target））
为什么当我切换类时，“clip”得到一个内联样式“display:none”
这不是因为
toggleClass
，而是因为您在视图中切换元素
jQuery（'.clip'）.toggle（）该行与
toggleClass

更新的JSFIDLE


.toggle（）

显示或隐藏匹配的元素

.data（）

存储与匹配元素关联的任意数据，或在命名数据存储中为匹配元素集中的第一个元素返回值。
jQuery（this）
指被单击的元素
jQuery（'.openup'）
。
此
指将
单击
处理程序绑定到的元素，在这种情况下，这将是
。openup
<代码>剪辑
获取
显示：无因为您正在调用它上的
toggle（）
，这不仅是为了您的答案，也是为了所有额外的信息！我的一个问题是没有注意到toggle和toggleClass的区别。感谢您的回复。删除toggle（）后，我得到了所需的内容。“jQuery（'.clip'）.toggle（）；将切换.clip类”此语句不正确，它会切换所触发元素的显示。基本上，它切换
显示：none
@subhaze是的，你是对的，它不会切换类，但我想我在说它将显示或隐藏元素时清除了它。我应该说“将使用.clip类切换元素”，但我认为他说到点子上了。当然，他只是建议您编辑该部分。
jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery('.clip').toggleClass('clipactive');
    return false;
});

<div class="openup" data-target=".clip">Lorem Ipsum </div>
<div class="clip">...</div>

jQuery('.openup').click(function() {
    var target = $($(this).data('target'));
    target.toggleClass('clipactive');
    return false;
});