1

Estou com um efeito toggle que abre e fecha uma div, e nesse efeito, coloquei pra adicionar uma class e remover. Ele adiciona a class, mas não está removendo a mesma. Por que?

JQuery

$j('.filters__filter.tamanho').click(function(){
    $j('.filters__filter.tamanho .ul--0').slideToggle(150);
    //remove class active
    $j('.filters__filter.tamanho').removeClass('active');
    //adiciona class active ao item clicado
    $j('.filters__filter.tamanho').addClass('active');
}); 

Se eu clico de novo, a class active

2
  • 4
    Você esta mandando ele remover a classe e em seguida você adiciona ela novamente?
    – wDrik
    24/04/2017 às 17:47
  • É, ficou confuso kk, ja tentei tanto fazer isso aqui, que não estou conseguindo. Como faço pra ele adicionar ao ser selecionado, e ao ser clicado de novo ou outra div for selecionada, ele remover a class? Existe alguma forma ou no próximo codigo de div selecionada, vou ter que mandar remover a dessa div? Obrigado! 24/04/2017 às 17:51

2 Respostas 2

2

Se tens vários elementos e queres que remover a classe a todos os que não foram o clicado (e ter toggle da class no clicado) podes fazer assim:

var filtros = $j('.filters__filter.tamanho');
filtros.click(function(e){
    filtros.each(function(){
        if (this == e.currentTarget) $(this).toggleClass('active').slideToggle(150);
        else $(this).removeClass('active');
    });
});

Assim removes a classe em todos, e fazes toggle do que foi clicado.

3
  • Sergio, acho que só não tem a necessidade de fazer um foreach nos filtros, basta apenas remover todos os ativos filtros.removeClass('active') e como você está no escopo do click, o this é o elemento que foi clicado, então é só executar diretamente $(this).toggleClass('active').slideToggle(150); jsfiddle.net/L4Lfa7r3 24/04/2017 às 19:09
  • 1
    @PedroCamaraJunior quando fazemos filtros.removeClass('active') ele corre um each na mesma internamente para tirar a classe um a um. Daí que com a minha solução poupa-se uma execução extra quando o this == e.currentTarget. Mas concordo que ficaria 2 linhas mais compacto.
    – Sergio
    24/04/2017 às 19:35
  • Concordo com seu ponto também, mas particularmente prefiro o código mais limpo. :) 24/04/2017 às 19:46
1
let filtersSize = jQuery('.filters__filter.tamanho')
filtersSize.on('click', function() {
    filtersSize.find('.ul--0').slideToggle(150)

    // toggle active class
    filtersSize.toggleClass('active')
})

Tenta isso aqui brother.. toggleClass vai alternar a classe..

3
  • Muito obrigado Drik, simples e resolveu meu problema, não lembrava do toggleClass. Mais uma vez, obrigado! 24/04/2017 às 17:57
  • Fecho brother, é nois!
    – wDrik
    24/04/2017 às 17:58
  • 1
    $j('.filters__filter.tamanho').toggleClass('active'); vai fazer toggle a todos os elementos (!). Se todos tiverem sem class active qualquer um que seja clicado faz com que todos fiquem com a classe active...
    – Sergio
    24/04/2017 às 18:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .