jQuery toggle（）-为活动元素添加和删除类

Question

目前，我正在使用以下代码段：

$('.element-block').click(function(){
    $(this).siblings(".key-element").toggle();

    $('.background-area').removeClass("active_bg");
    $(this).parent('.background-area').addClass("active_bg");
});

我有DIV元素列表。 在此块中，当我单击.element-block ， jQuery函数toggle（）显示所需区域，如果再次单击，则将其隐藏以进行切换 ，同时还将背景色添加到该区域。

例如，这运行良好：我单击A .block-element -出现数据+背景色已更改。 然后单击B。块.block-element -出现数据+背景色已更改。 凉。

但是，如果我单击A .block-element -data会出现+背景颜色已更改，然后再次单击.block-element -data将会被隐藏，但背景色不会更改 。

如何解决这个问题？

Answer 1

那是因为您总是在添加类。 您可以事先检查是只删除还是添加它：

var $active_bg = $('.background-area.active_bg').removeClass("active_bg");
var $bg = $(this).parent('.background-area');

// Only add the class if the current background didn't have the class
if ($bg[0] !== $active_bg[0]) {
    $bg.addClass("active_bg");
}

上面的代码仅允许一个.background-area元素处于“活动”状态。 如果可以有多个，则可以将代码简化为：

$(this).parent('.background-area').toggleClass("active_bg");