jQuery - 切换和删除类

Question

很简单，但我不明白。我有一个名为 #title 的链接，当您单击它时，它会切换名为 #content 的 div。这工作得很好，但此外，我将“active”类添加到我的#title 链接中，即使使用removeClass，我也无法删除它。

请参阅上面的代码和示例链接(仅当 #content 展开时，标题才应为红色，而不是始终)。

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

http://jsfiddle.net/vY3WY/

Answer 1

您可以将toggleClass 函数与toggle 一起使用。

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');   
    }
});