Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GustavoDose

Aparecer determinada div

Recommended Posts

Galera, estou com o seguinte problema, tenho uma ul e suas li, quero que quando clicar em uma li ela abra seu determinado conteúdo e quando clicar no botão de esconder ele esconda o seu determinado conteúdo, eu fiz aqui mas não estou conseguindo fazer com que abra apenas o seu determinado conteúdo, abre todos.

 

 

html:

 <ul>
    <li class="abrir"><span>abrir</span>
       <div class="conteudo">
             HAHAHA
           <span clas="esconder"></span>
        </div>
     </li>
    <li class="abrir"><span>abrir</span>
       <div class="conteudo">
             HAHAHA
             <span clas="esconder"></span>
        </div>
     </li>
</ul>

script:

    function mostrar(){
        var $mostrar = $(".abrir span"),
        $esconder = jQuery(".esconder"),
        $texto = jQuery(".conteudo");
        
        
        $texto.hide();
        $mostrar.on("click", function(){    
            $(".abrir").find('.conteudo').slideToggle('fast');
        });
        
        $esconder.on("click", function(){            
             $('.conteudo').slideToggle('fast');
        });
        
        $mostrar.on("click", function(e){
            e.stopPropagation();
        });
        
        jQuery("body").on("click", function(){
            $texto.hide();
        });
    };

Alguem sabe como ajudar? lembrando que o click tem que ser no span dentro da li e não na li em si ;/

Compartilhar este post


Link para o post
Compartilhar em outros sites

usa "this" pq se você não usar ele vai abrir todos os elementos.

Por exemplo, nesse código aqui que uso em um site meu que quero mostrar um popover quando passo o mouse em cima de um link.

<script type="text/javascript">
$(document).ready(function(){
$(".show-popover").mouseenter(function(){
$(".list-group a").mouseenter(function(){
$(this).popover('show');
});
});
$(".show-popover").mouseleave(function(){
$(".list-group a").popover('hide');
});
});
</script>

Outro modo que deve funcionar que também uso em uma página aqui é esse:

Html:

<a class="btn btn-success button-margin" id="MostrarDiv" data-toggle="button">Exibir DIV</a>

<a class="btn btn-danger button-margin" id="EsconderDiv" data-toggle="button">Ocultar DIV</a>
<hr>
<div id="Antigos" style="display:none;">
conteudo
</div>
Script:

<script>
$(document).ready(function() {
$("#MostrarDiv").click(MostrarMensagem);
$("#EsconderDiv").click(EsconderMensagem);
});

function MostrarMensagem(){
$("#Antigos").fadeIn('slow');
}
function EsconderMensagem(){
$("#Antigos").fadeOut('slow');
}
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Filipe o meu problema é que não posso usar o this, por que o click esta no span desta forma o this não consegue chegar ate o .conteúdo que precisar ser aberto, por isso a dificuldade ;/


Filipe o meu problema é que não posso usar o this, por que o click esta no span desta forma o this não consegue chegar ate o .conteúdo que precisar ser aberto, por isso a dificuldade ;/. O clique tem que ser no span para abrir o conteudo da li ;/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegue sim cara..

 

Depois do this, vc usa um .parent() para do SPAN ir para o LI, e para chegar no conteúdo pode usar um .find()

 

 

A solução é sim usar o this, junto com .parent() e .find()

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegue sim cara..

 

Depois do this, você usa um .parent() para do SPAN ir para o LI, e para chegar no conteúdo pode usar um .find()

 

 

A solução é sim usar o this, junto com .parent() e .find()

 

Deu certo Willian, Obrigado :D

VOu por no jsfiddle pera

 

Obrigado Filipi

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.