Question

一个简单的，但我无法弄清楚。我有一个名为#title的链接，当你点击它时，它会切换一个名为#content的div。这很好用，但另外我在我的#title链接中添加了“active”类，即使使用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

This version works

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

Live Demo

切换#content并检查之后是否可见。然后根据结果在#title上切换班级。也可能是一个单行功能，但它不能满足我的可读性预期。

Answer 4

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

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

}）;

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

Answer 5

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

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

jQuery - 切换＆amp; removeClass

5 个答案: