jQuery - toggle&removeClass

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

这个版本有效.

$('#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根据结果切换班级.也可能是单行功能,但它不能满足我的可读性期望.