Publicado em 12 de nov.

Aparecer determinada div

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 ;/

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Filipe B.· 12 de nov.

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>

GustavoDose· 12 de nov.

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 ;/

William Bruno· 12 de nov.

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()

Filipe B.· 12 de nov.

VOu por no jsfiddle pera

GustavoDose· 12 de nov.

>
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

Filipe B.· 12 de nov.

Desculpa a demora kkk trabalho pacas. se já conseguiu beleza! Sucesso ai!

GustavoDose· 13 de nov.

Desculpa a demora kkk trabalho pacas. se já conseguiu beleza! Sucesso ai!

Tentei fazer da forma mais difícil possível e esqueci do parent(). Obrigadooo