[Resolvido] Problema com o Toggle

[Pablo Gates 10]

Boa tarde galera

 

é o seguinte estou com problemas ao executar o efeito toggle fora da lista <ul> vejam:

 

Assim ele executa normalmente:

 

<script type="text/javascript">
$(document).ready(function(){

       $('.resposta').hide();

       $('li.pergunta').click(function( e ){
               e.preventDefault();
               $( this ).next('.resposta').toggle('slow');
       });
       $('.resposta a').click(function( e ){
               e.preventDefault();
               $( this ).parent('.resposta').hide('slow');
       });
});
</script>

 

<div id="sub_menu">
<ul>
	<li class="pergunta">
		<!--<a href="index.php?p=nav/outsourcing">-->
		<span>OUTSOURCING</span>
		<p>renove seus equipamentos</p>
		<!--</a>-->
	</li>

	<div class="resposta">
		CONT
	</div><!-- resposta -->
</div>

 

Mas preciso que ele funcione fora da lista assim :

 

<div id="sub_menu">
<ul>
	<li class="pergunta">
		<!--<a href="index.php?p=nav/outsourcing">-->
		<span>OUTSOURCING</span>
		<p>renove seus equipamentos</p>
		<!--</a>-->
	</li>

</div>

	<div class="resposta">
		CONT
	</div><!-- resposta -->

 

 

Espero ter sido claro, quando eu clico na <li> ele exibe uma div que tem a class resposta, mas ele só funciona quando está abaixo da <li> Como eu faria pra executa-lo da mesma forma estando fora da div ?

[eduardocintra 1]

Boa tarde galera

 

é o seguinte estou com problemas ao executar o efeito toggle fora da lista <ul> vejam:

 

Assim ele executa normalmente:

 

<script type="text/javascript">
$(document).ready(function(){

       $('.resposta').hide();

       $('li.pergunta').click(function( e ){
               e.preventDefault();
               $( this ).next('.resposta').toggle('slow');
       });
       $('.resposta a').click(function( e ){
               e.preventDefault();
               $( this ).parent('.resposta').hide('slow');
       });
});
</script>

 

<div id="sub_menu">
<ul>
	<li class="pergunta">
		<!--<a href="index.php?p=nav/outsourcing">-->
		<span>OUTSOURCING</span>
		<p>renove seus equipamentos</p>
		<!--</a>-->
	</li>

	<div class="resposta">
		CONT
	</div><!-- resposta -->
</div>

 

Mas preciso que ele funcione fora da lista assim :

 

<div id="sub_menu">
<ul>
	<li class="pergunta">
		<!--<a href="index.php?p=nav/outsourcing">-->
		<span>OUTSOURCING</span>
		<p>renove seus equipamentos</p>
		<!--</a>-->
	</li>

</div>

	<div class="resposta">
		CONT
	</div><!-- resposta -->

 

 

Espero ter sido claro, quando eu clico na <li> ele exibe uma div que tem a class resposta, mas ele só funciona quando está abaixo da <li> Como eu faria pra executa-lo da mesma forma estando fora da div ?

 

Cara eu não testei seu código mais olhando ele, eu vejo que o problema é no seu seletor veja bem:

 

 

O problema está no seu seletor da div '.resposta' em um dos html realmente o elemento '.resposta' é próximo elemento então seu código:

 

$( this ).next('.resposta').toggle('slow');

 

Vai funcionar perfeitamente, só que no segundo html que você postou isso não acontece, o que você pode fazer é subir para o elemento pai e só depois selecionar o '.resposta', acho que isso irá funcionar:

 

$( this ).parents('sub_menu').next('.resposta').toggle('slow');

[Pablo Gates 10]

Cara eu não testei seu código mais olhando ele, eu vejo que o problema é no seu seletor veja bem:

 

 

O problema está no seu seletor da div '.resposta' em um dos html realmente o elemento '.resposta' é próximo elemento então seu código:

 

$( this ).next('.resposta').toggle('slow');

 

Vai funcionar perfeitamente, só que no segundo html que você postou isso não acontece, o que você pode fazer é subir para o elemento pai e só depois selecionar o '.resposta', acho que isso irá funcionar:

 

$( this ).parents('sub_menu').next('.resposta').toggle('slow');

 

Entendi, fiz a alteração mas mesmo assim ainda não funciona

[eduardocintra 1]

Eu to no trampo agora,

 

assim que chega em casa vou testa o código pra você ok?

[Pablo Gates 10]

Eu to no trampo agora,

 

assim que chega em casa vou testa o código pra você ok?

 

beleza eu também to, vou continuar tentando mas quando chegar em casa vejo

 

obrigado por enquanto

[Thiago de Oliveira Cruz 21]

Que tal tu pegar o index do elemento com .index() pra saber em qual pergunta você ta...

E ai utilizar o mesmo index para selecionar a resposta com $(".resposta").eq(index)?

 

Ou algo do genero ;)

 

Abraços

[Pablo Gates 10]

Obrigado galera pela ajuda resolvi dessa forma

 

$(document).ready(function(){

$('.resposta').hide();

$('.pergunta').click(function( e ){

e.preventDefault();

$('.resposta').toggle('slow');

});

$('.resposta').click(function( e ){

e.preventDefault();

$( this ).parent('.resposta').hide('slow');

});

});

[Pablo Gates 10]

Que tal tu pegar o index do elemento com .index() pra saber em qual pergunta você ta...

E ai utilizar o mesmo index para selecionar a resposta com $(".resposta").eq(index)?

 

Ou algo do genero ;)

 

Abraços

 

Gostei da sua sugestão como eu poderia fazer isso ? mais detalhadamente ?