jquery - jQuery - 切换和删除类

Question

一个简单的，但我无法弄清楚。我有一个名为#title 的链接，当您单击它时，它会切换名为#content 的div。这非常有效，但此外，我还在我的#title 链接中添加了“活动”类，即使使用 removeClass，我也无法摆脱它。

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

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

http://jsfiddle.net/vY3WY/

Answer 1

您可以将 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');   
    }
});

Answer 2

这个版本有效。

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

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

或者你可以toggleClass用来隐藏所有这些逻辑。

Answer 3

一个紧凑且仍然可读（我猜）的解决方案：

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

现场演示

之后它会切换#content并检查它是否可见。然后它#title根据结果切换类。也可以是一个单行函数，但它不能满足我当时的可读性期望。

Answer 4

我认为这是最合适的方式。

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

Answer 5

用其他值隐藏当前值的另一种解决方案

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

});

点击这里！这也适用于参考链接。