Question

我创建了一系列元素，当你点击它们中的任何一个时，它们会展开，将其他元素推开。最初，如果你再次点击它，元素会收缩，但现在我想采用关闭功能并将其放在元素中的按钮中。最初当你点击元素时，我使用jQuery为各种元素添加了许多类。

$(".left > .elem").click(function () {
    $(this).addClass("expand");
    $(this).parent().addClass("WithLarge");
    $(this).children(".bar").addClass("visible");
    $(this).children(".reduce_button").addClass("visible");
    $(".right").addClass("shift_right");
});

当我点击关闭按钮时，我想删除这些类。

$(".reduce_button").click(function () {
    $(this).parent().removeClass('expand');
    $(this).parent().removeClass("WithLarge");
    $(this).parent().children(".bar").removeClass("visible");
    $(this).parent().children(".reduce_button").removeClass("visible");
}

问题是，这些课程并没有出现问题。

您可以在JSFiddle

上试用

点击黄色框（".left > .elem"），它展开推动其他人，点击红色框（".reduce_button"），没有任何反应。我试过了

console.log($(this).parent().hasClass('expand'));
$(this).parent().removeClass('expand');
console.log($(this).parent().hasClass('expand'));

查看是否已将其删除。它返回false，即使该类仍在那里。为什么我不能删除这些类？

Answer 1

你正在删除课程。但是，点击.reduce_button也会触发.elem点击事件，再次将该类添加回来。

修改

如下面由j08691评论，您可以添加stopPropagation以保持事件进入下一个侦听器，例如：

$(".reduce_button").click(function (e) {
    $(this).parent().removeClass('expand');
    e.stopPropagation();
    ...

这是您的小提琴更新：http://jsfiddle.net/HybHK/9/

为什么jquery不能删除这些类？

1 个答案: