jQuery - 切换和删除类

一个简单的，但我无法弄清楚。我有一个名为#title的链接，当你点击它时，它会切换名为#content的div。这很好，但除此之外，我在我的#title链接中添加了“活动”类，即使使用removeClass也无法摆脱它。jQuery - 切换和删除类

请参阅上面的代码和示例链接（只有在#content展开时，标题才应该是红色，而不是全部）。

$('#title').click(function() { 
    $(this).addClass('active'); 
    $('#content').toggle(); 
}), function() { 
    $(this).removeClass('active'); 
};

http://jsfiddle.net/vY3WY/

来源

2011-04-07 Wordpressor

您可以使用toggleClass功能以及切换。

http://jsfiddle.net/vY3WY/1/

$('#title').click(function() { 
    $(this).toggleClass('active'); 
    $('#content').toggle(); 
});

或者你可以使用一个更强大的版本，这将确保如果内容是可见否则删除的类添加。

http://jsfiddle.net/vY3WY/6/

$('#title').click(function() { 
    $('#content').toggle(); 
    if ($('#content:visible').size() != 0) 
    { 
     $(this).addClass('active'); 
    } 
    else 
    { 
     $(this).removeClass('active'); 
    } 
});

来源

2011-04-07 17:57:48 Gazler

+1为第一个版本，我猜这对于这个问题已经足够了 – kapa 2011-04-07 18:28:49

第一个例子，就是WOW，两行。真棒！ – Wordpressor 2011-04-07 18:51:51

This version works。

$('#title').click(function() { 
    if($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    $('#content').toggle(); 
});

使用hasClass检查是否存在“活动”，如果存在，请将其删除。如果不是，则添加它。

或者您可以使用toggleClass来隐藏所有的逻辑。

来源

2011-04-07 17:57:38 justkt

你或许应该在这里，而不是发布的解决方案只是一个链接，因为如果亡的jsfiddle这个问题的未来观众。 :) – Gazler 2011-04-07 18:04:48

紧凑且仍然可读（I猜）溶液：

$('#title').click(function() { 
    var isContentVisible=$('#content').toggle().is(':visible'); 
    $(this).toggleClass('active', isContentVisible); 
});

Live Demo

它切换#content和检查它是否是可见的或不之后。然后根据结果在#title上切换课程。可能也是一个单行函数，但它不会满足我的可读性期望。

来源

2011-04-07 18:18:44 kapa

+1 - 尼斯紧凑型解决方案。我忘记了toggleClass上的开关。 – Gazler 2011-04-07 18:30:12

多一个解隐藏当前值与其他值

$('.my').click(function() { 
if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
} else { 
    $(this).addClass('active'); 
} 
$('.my').toggle();

}）;

点击here！这也适用于reference links。

来源

2015-09-11 06:45:44

我认为这是最合适的方式来做到这一点。

$(this).toggleClass('active').siblings().removeClass('active');

来源

2017-11-16 17:16:24

jQuery - 切换和删除类

回答

相关问题