0

Eu estou iniciando no jQuery e criei um script no qual quando clica na div exibe o conteúdo. Até ai tudo bem, mas quando clica em texto fechar o hide do jquery não esta funcionando.

jQuery(function(){
     //jQuery('#showall').click(function(){
       //    jQuery('.targetDiv').show();
    //});
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show(500).fadeIn();
          //Query('.fechar').hide(500).fadeIn();
    });
    jQuery('.fechar').click(function(){ 
        jQuery('#div'+$(this).attr('target')).hide(500);
    });
    //$('.fechar').click(function(){
     // $(".targetDiv").slideToggle();
   // });
});

O script no JSFinddle

3
  • Cara, ou você usa hide-show, ou usa fadeIn-fadeOut, mas melhor mesmo é .fadeToggle(), nela voce nao precisa validar se o negócio ta escondido ou nao, a própria função já faz isso. Mais uma coisa, utilize "$" no lugar de "jQuery" e ".on('click',function()" no lugar de .click(function(). 13/10/2016 às 14:50
  • obrigado, pela dica. Só me tira uma dúvida, pq usar on('click',function()" no lugar de .click(function()? 13/10/2016 às 17:57
  • Na real eu não sei ao certo, mas eu lembro que sempre que eu fazia isso brigavam comigo kkkkk Só to repassando o que me falavam. Mas na documentação ta escrito que .click é um "atalho" da função on.('click' 13/10/2016 às 18:15

3 Respostas 3

3

Editei um pouco seu código e adicionei um fadeOut no evento click da classe .fechar

$(document).ready(function() {

        $('.showSingle').click(function(){
              $('.targetDiv').hide();
              $('#div'+$(this).attr('target')).show(500).fadeIn();
        });
        
        $('.fechar').click(function(){ 
              $('.targetDiv').fadeOut(500);
        });

});
.targetDiv{display:none;}
.fechar{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="targetDiv">Lorum Ipsum1 <span class="fechar">fechar</span></div>
<div id="div2" class="targetDiv">Lorum Ipsum2 <span class="fechar">fechar</span></div>
<div id="div3" class="targetDiv">Lorum Ipsum3 <span class="fechar">fechar</span></div>
<div id="div4" class="targetDiv">Lorum Ipsum4 <span class="fechar">fechar</span></div>


<div class="buttons">

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

2
  • Muito obrigado esta show de bola, muito obrigado. Estava errando por pouco. 13/10/2016 às 21:05
  • n esquece de marcar como Melhor Resposta, pra ajudar os mendigo de repu kkkkkkkkkk 13/10/2016 às 21:40
0
jQuery(function(){
    jQuery('.showSingle').on('click',function(){
        jQuery('.targetDiv').hide();
        jQuery('#div'+$(this).attr('target')).fadeIn(500);

    });
    jQuery('.fechar').on('click',function(){ 
        jQuery('#div'+$(this).attr('target')).fadeOut(500);
    });
});   
1
  • Opa obrigado por me ajudar, mas não ta rodando não 16/10/2016 às 1:42
0

Incrementei a resposta do Sampaio com alguns recursos a mais, basta ajustar para o efeito que achar melhor (fade, slide ou show/hide)

  $('.showSingle').click(function() {
    var $target = $('#div' + $(this).attr('target'));
    if ($target.is(':visible')) {
      $target.hide(500);
      return false;
    }
    var t = 0;
    if ($('.targetDiv').is(':visible')) {
      $('.targetDiv').hide(500);
      t = 500;
    }
    $target.delay(t).show(500);
  });

  $('.fechar').click(function() {
    $('.targetDiv').hide(500);
  });
.targetDiv {
  display: none;
}
.fechar {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="targetDiv">Lorum Ipsum1 <span class="fechar">fechar</span>
</div>
<div id="div2" class="targetDiv">Lorum Ipsum2 <span class="fechar">fechar</span>
</div>
<div id="div3" class="targetDiv">Lorum Ipsum3 <span class="fechar">fechar</span>
</div>
<div id="div4" class="targetDiv">Lorum Ipsum4 <span class="fechar">fechar</span>
</div>


<div class="buttons">

  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</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 .