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

jQuery toggle() - adding and removing class for active element

本文关键字：添加 元素 删除 活动 toggle jQuery      更新时间：2023-09-26

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

$('.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（）显示所需区域，如果我再次单击，toggle将其隐藏，并且我正在向该区域添加背景色。

这工作得很好，例如：我点击.block-element-数据出现+背景颜色改变。然后我点击B .block-element-数据出现+背景颜色改变。凉的

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

如何解决此问题？

这是因为您总是在添加类。您可以事先检查是否只想删除它或同时添加它：

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");
相关文章：