2

Tenho o seguinte HTML:

<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

O unidadesTotal é um botão, quando eu clico nele o unidadesConteudo deixa der ser display:none e passa a ser display:block, até ai perfeito, aqui está meu Jquery:

$('.unidadesTotal').click(function () {
    $(this).parent().find('.unidades').addClass('unidadesHover');
    $(this).parent().find('.unidadesConteudo').slideDown();
});

Como eu faria um IF para o botão dar um slideUp?

2 Respostas 2

1

Você simplesmente pode verificar se há a classe que você adiciona ao realizar o .slideDown() que é a classe unidadesHover e então você faz um if que realiza o .slideDown() caso esta classe exista, e remove-a.

$('.unidadesTotal').click(function () {
    var unidades         = $(this).parent().find('.unidades');
    var unidadesConteudo = $(this).parent().find('.unidadesConteudo');
    if(unidades.hasClass('unidadesHover')){ //se houver a classe .unidadesHover
      unidades.removeClass('unidadesHover');
      unidadesConteudo.slideUp();  
    }else{
      unidades.addClass('unidadesHover');
      unidadesConteudo.slideDown();  
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

5
  • O !$ é o "senão", né? não trabalhei com ele ainda, com Jquery. Commented 1/12/2014 às 11:38
  • 1
    o ! é um operador que nega a condição posterior, por ex.: if (!true) significa false e if(!false) significa true Commented 1/12/2014 às 11:39
  • 1
    Você também poderia inverter as coisas, remover o ! e trocar os códigos de lugar um com o outro, deixando o .slideDown() no else e o .slideUp() no if, também funciona :D Commented 1/12/2014 às 11:40
  • Editei a resposta para que fique de melhor entendimento para você. Commented 1/12/2014 às 11:49
  • 1
    A explicação ficou perfeita! Commented 1/12/2014 às 11:52
1

Você pode utilizar o seletor :visited para checar se o elemento está visível ou não (que é o que o slideUp() e o slideDown() fazem: eles modificam a visibilidade do elemento). Por questões de performance, preferi optar por guardar a referência do elemento em uma variável, mas funcionaria sem ela.

$('.unidadesTotal').click(function () {
    var unidadesConteudo = $(this).parent().find('.unidadesConteudo');
    $(this).parent().find('.unidades').addClass('unidadesHover');
  
    if(unidadesConteudo.is(':visible')) {
      unidadesConteudo.slideUp();
    } else {
      unidadesConteudo.slideDown();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unidadesTotal">
    <div class="unidades">tituloSYS</div>
    <div style="display:none" class="unidadesConteudo margin-top-25">
        <div class="margin-left-10">    <span>descricaoSYS</span>

        </div>
        <div class="atendimento unidadesAtendimento margin-top-15 f-left">hor&aacute;rio de atendimento</div>   <a href="codigoSYS" target="_blank"><div class="unidadesAtendimento unidadesLocalizacao margin-top-15 margin-left-10 f-left">ver localiza&ccedil;&atilde;o</div></a>

    </div>
</div>

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 .