jQuery - переключение и удаление класса

Question

Легко, но я не могу понять это. У меня есть ссылка с именем #title, и когда вы нажимаете на нее, она переключает div с именем #content. Это прекрасно работает, но кроме того, я добавляю «активный» класс к своей ссылке #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();
});

Проверьте наличие 'active' с помощью hasClass и удалите его, если он там есть. Добавьте его, если это не так.

Или вы можете использовать toggleClass, чтобы скрыть всю эту логику.

Answer 3

Компактное и все еще читаемое (я полагаю) решение:

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

Live Demo

Переключает #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();

});

Нажмите здесь !Это работает и с ссылочными ссылками .