Question

尝试专门学习jQuery和toggleClass。

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

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

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

这是我的Fiddle

我需要帮助理解两件事：

为什么要将“clipactive”类添加到点击的元素中？ “这个”不是指上面一行中的“剪辑”吗？我该如何定位？兄弟（）＆GT;
为什么'cut'在我切换课程时会获得内联样式'display：none'？

与'this'相关的是否没有正确定位？

Answer 1

如评论中所述，jQuery(this)指的是点击的元素。
jQuery('.clip').toggle();将切换.clip类，这意味着它将显示或隐藏元素，无论它是什么。因此，它会从display:none;更改为隐藏它，display:block;会显示它。

我认为这是你想要的代码：

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

Answer 2

为什么课程“剪辑”＆＃39;被添加到被点击的元素？不是这个＆＃39;参考＆＃39;剪辑＆＃39;在上面的行？我怎么得到它   达到目标？兄弟（）＆GT;

this指的是点击绑定到的元素。

我说＆＃39;绑定＆＃39;因为您可以<span>作为.openup的子项被点击，但this不会引用<span>，它会引用.openup，因为那是你对事件的约束。有关事件处理的更多信息，请访问https://learn.jquery.com/events/inside-event-handling-function/

您可以通过几种不同的方式参考.clip，下面我将展示使用data-的代码，以便您可以为要定位的元素定义选择器：

HTML：

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

JS：

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

$(this).data('target')（这是指点击的元素）获取data-target的值，这是我们想要定位的类，然后我们用$()包装它，以便jQuery将通过$($(this).data('target'));提供的选择器获取元素，现在我们可以切换类。

为什么＆＃39;剪辑＆＃39;得到一个内联样式＆display©none：none＆＃39;当我切换课程时？

这不是因为toggleClass，因为您在视图jQuery('.clip').toggle();内切换该元素与toggleClass不同1}}

更新了jsfiddle https://jsfiddle.net/b5u141gL/1/

.toggle（） http://api.jquery.com/toggle/

显示或隐藏匹配的元素。

.data（） https://api.jquery.com/data/

存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

jQuery toggleClass定位正确的元素

2 个答案: