Javascript 为什么可以'；jquery是否删除这些类？

我已经创建了一系列元素，当你点击其中任何一个元素时，它们会展开，将其他元素推开。最初，如果您再次单击它，元素将收缩，但现在我想使用close功能并将其放置在元素中的按钮中。 最初，当您单击该元素时，我使用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");
});

当我单击close按钮时，我想删除这些类

$(".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");
}

问题是，这些课程没有改变

你可以在网上试一试

单击黄色框（

”.left>.elem“

），它会展开并将其他框推开，单击红色框（

”.reduce_按钮“

），然后什么也不会发生。我试过了

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

查看它是否已被删除。它返回false，即使类仍然存在。

---

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

您正在删除该类。但是，单击

.reduce_按钮

也会触发

.elem

单击事件，从而再次添加类

编辑：

正如j08691在下面所评论的，您可以添加

stopPropagation

以将事件继续发送到下一个侦听器，如：

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

这是您的小提琴更新版：

使用

e.stopPropagation（）

和

$（“.reduce_按钮”）检查此叉子。单击（函数（e）{

将修复它。