2

Tenho um jQuery que fiz para abrir e fechar uma div ao clicar na pergunta correspondente. O problema é que somente a primeira div está abrindo\fechando, mesmo eu clicando na 3ª ou 5ª pergunta.

Exemplo: http://jsfiddle.net/1sozc3rL/

jQuery:

var SC = jQuery.noConflict();

SC(document).ready(function() {
    SC('.FAQ-conteudo').hide();
    SC('.FAQ-fecha').hide();
    SC('.FAQ-pergunta').removeClass('FAQ-atual');
    SC('.FAQ-pergunta').click(function(){
        var i = SC(this).index();
        var faqTemClasse = SC('.FAQ-pergunta:eq('+i+')').hasClass('FAQ-atual');
        if (faqTemClasse) {
            SC('.FAQ-pergunta:eq('+i+')').removeClass('FAQ-atual');
            SC('.FAQ-conteudo:eq('+i+')').fadeOut(300);
            SC('.FAQ-fecha:eq('+i+')').hide();
            SC('.FAQ-abre:eq('+i+')').show();
        } else {
            SC('.FAQ-conteudo').fadeOut(300);
            SC('.FAQ-pergunta:eq('+i+')').addClass('FAQ-atual');
            SC('.FAQ-conteudo:eq('+i+')').fadeIn(300);
            SC('.FAQ-fecha:eq('+i+')').show();
            SC('.FAQ-abre:eq('+i+')').hide();
        }
    });
});

Edit: Fiz mais uns testes e realmente ele está pegando apenas o index 0, por isso está abrindo\fechando somente a primeira div de conteúdo.

O .index() não pega a ordem de elementos dentro de todo o arquivo, independendo do lugar?

3
  • Como são várias DIVs, acho que você poderia mostrar/esconder setando IDs em cada uma delas, e não por classe como você está fazendo. Você teria mais controle das ações de cada DIV.
    – Franchesco
    Commented 10/09/2014 às 18:58
  • Mas eu teria que criar um script jQuery para cada evento de cada div, certo? Queria algo padrão :\
    – Ricardo
    Commented 10/09/2014 às 19:05
  • Tem razão. Eu usei o collapse do Bootstrap.
    – Franchesco
    Commented 10/09/2014 às 19:11

2 Respostas 2

4

Nesse caso, como tem várias perguntas com marcação igual só mudando o conteúdo, recomendo usar o contexto do seletor em vez de usar o índice.

O padrão que se repete para cada pergunta é:

<div class="FAQ-box cf">
    <a class="fx left FAQ-pergunta">Titulo</a>
    <img src="..." class="middle FAQ-abre right" />
    <img src="..." class="middle FAQ-fecha right" />
    <div class="clear FAQ-conteudo">
        texto e mais texto
    </div>
</div>

Você faz bind de click no .FAQ-pergunta, podemos escolher o contexto dos seletores como o pai dele, onde fazendo "transversal" conseguimos todos os elementos necessários no script.

O uso do contexto se faz da seguinte forma:

$('.seletor', contexto).oqueseja();

Com isso, qualquer elemento que faça "matching" desse seletor a partir da sub-árvore do contexto será incluído. Os demais serão ignorados.

O seletor padrão começa a busca pelo do document. Usando o contexto ele começa a busca pelo elemento contexto.

No seu script ficará:

var SC = jQuery.noConflict();

SC(document).ready(function() {
    SC('.FAQ-conteudo').hide();
    SC('.FAQ-fecha').hide();
    SC('.FAQ-pergunta').removeClass('FAQ-atual');
    SC('.FAQ-pergunta').click(function(){
        var $this = SC(this);
        var $pai = $this.parent(); // O pai, que engloba tudo que voce usa nesse script será o contexto!
        var faqTemClasse = SC('.FAQ-pergunta', $pai).hasClass('FAQ-atual');

        if (faqTemClasse) {
            SC('.FAQ-pergunta', $pai).removeClass('FAQ-atual');
            SC('.FAQ-conteudo', $pai).fadeOut(300);
            SC('.FAQ-fecha', $pai).hide();
            SC('.FAQ-abre', $pai).show();
        } else {
            SC('.FAQ-conteudo', $pai).fadeOut(300);
            SC('.FAQ-pergunta', $pai).addClass('FAQ-atual');
            SC('.FAQ-conteudo', $pai).fadeIn(300);
            SC('.FAQ-fecha', $pai).show();
            SC('.FAQ-abre', $pai).hide();
        }
    });
});

Exemplo no JSFiddle.

Mais informações dê uma olhada no parágrafo Selector Context na documentação do jQuery.

1
  • Poxa, eu estava justamente tentando adicionar um "pai" ao código e não estava conseguindo. Muito obrigado! :D Funcionou como eu queria!
    – Ricardo
    Commented 10/09/2014 às 20:50
2

Você pode usar o toggle no elemento clicado e o not para operar com os outros, assim:

Jquery:

var SC = jQuery.noConflict();

SC(document).ready(function() {
    SC('.FAQ-conteudo, .FAQ-fecha').hide(); // oculta todos os .FAQ-conteúdo e .FAQ-fecha
    SC('.FAQ-pergunta').click(function(){
        SC('.FAQ-pergunta').not(this).removeClass('FAQ-atual'); // remove a classe FAQ-atual de todas as perguntas, exceto da pergunta clicada
        SC('.FAQ-conteudo').not(SC(this).siblings('.FAQ-conteudo')).slideUp(300); // oculta todos os .FAQ-conteúdo abertos, exceto o irmão da pergunta clicada
        SC('.FAQ-fecha').not(SC(this).siblings('.FAQ-fecha')).hide(); // oculta todos os .FAQ-fecha, exceto o irmão da pergunta clicada
        SC('.FAQ-abre').not(SC(this).siblings('.FAQ-abre')).show(); // mostra todos os .FAQ-abre, exceto o irmão da pergunta clicada
        SC(this).toggleClass('FAQ-atual').siblings('.FAQ-conteudo').slideToggle(300).siblings('.FAQ-fecha, .FAQ-abre').toggle(); // inverte a classe FAQ-atual na pergunta clicada . inverte o slide no .FAQ-conteúdo irmão da pergunta clicada . inverte a exibição em .FAQ-fecha e .FAQ-abre, irmãos da pergunta clicada
    });
});

Veja funcionando no JSfiddle


Algumas das funções do jquery tem sua versão toggle, que atua invertendo o status atual, então temos:

toggleClass(classe) se a classe esta adicionada ele remove, e se não está, ele adiciona.

slideToggle se esta visível ele oculta com slide, se esta oculto ele exibe com slide.

toggle se esta visível ele oculta, se esta oculto ele exibe.


A função .not(elemento) retira da seleção os elementos nela listados.

5
  • Não entendi muito bem seu código, mas funcionou. Vou estudar esses novos comandos. Obrigado.
    – Ricardo
    Commented 10/09/2014 às 20:50
  • @Ricardo Editei a resposta e comentei cada linha... Commented 10/09/2014 às 20:56
  • 1
    @Ricardo Havia um pequeno bug, addClass('FAQ-atual') deveria ser toggleClass('FAQ-atual'), e também SC('.FAQ-pergunta').removeClass('FAQ-atual'); deveria ser: SC('.FAQ-pergunta').not(this).removeClass('FAQ-atual');, corrigi na resposta e no jsfiddle. Commented 10/09/2014 às 21:00
  • 1
    @Ricardo Para esse tipo de apresentação eu acho que o efeito slide fica melhor que o fade, veja o funcionamento no jsfiddle. Commented 10/09/2014 às 21:51
  • Verdade. Fica esteticamente melhor. Obrigado :D
    – Ricardo
    Commented 11/09/2014 às 12:34

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 .