Ir para conteúdo

POWERED BY:

Arquivado

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

Pirifox

como trocar css do submenu ?

Por , em Javascript

Recommended Posts

Pirifox    0

Pirifox
Postado

Ola.

 

Tenho o seguinte menu

 

<ul id="menu">

<li> <a href="#"><div class="li_titulo">TITULO</div></a>
<ul>
<li> <a href="#"><div class="li_categoria">CATEGORIA</div></a>
<ul>
<li><span class="li_item">ITEM</span></li>
</ul>
</li>
</ul>
</li>

...
</ul>

 

 

E tenho o seguinte javascript (utilizando JQuery) que deixa esse menu mais funcional

 

function initMenu(){
  $('#menu ul').hide();
  $('#menu li a').click(
	function() {
	$(this).next().slideToggle('normal');
	  }
	);
  }

Funciona legal, eu clico em TITULO e ele exibe a CATEGORIA, eu clico em CATEGORIA e ele exibe ITEM.

 

Porem estou confuso a respeito de um outro recurso que seria de mudar o css da CATEGORIA quando ela for expandida e mudar novamente o css quado ela for encolhida.

Eu consegui mudar o css assim que ela é expandida ( $(this).addClass('classe') na função do clique ) porem nao faço ideia de como mudar novamente assim que ela for encolhida.

 

Agradeço quem puder me ajudar.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Essa dúvida é de Javascript, postou no fórum de AJAX amigo.

Não seria então, fazer o mesmo, mas no hide?

 

Coloca um link disso, tá faltando muito código ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pirifox    0

Pirifox
Postado

Ola William, obrigado por responder.

 

Por eu estar utilizando JQuery eu achei que esse seria o forum correto, ja que JQuery é mto utilizado para empregar efeitos em ajax como eu estou fazendo no caso.

 

Como essa não é uma duvida de iniciante, eu achei que era desnecessario colocar o código completo

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function initMenu(){
 $('#menu ul').hide();
 $('#menu li a').click(
   function() {
   $(this).next().slideToggle('normal');
     }
   );
 }
$(document).ready(function() {initMenu();});
</script>
</head>

<body>
<ul id="menu">

<li> <a href="#"><div class="li_titulo">TITULO</div></a>
<ul>
<li> <a href="#"><div class="li_categoria">CATEGORIA</div></a>
<ul>
<li><span class="li_item">ITEM</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>

</html>

 

Copie o código acima e cole em um arquivo HTML.

Lembre-se que voce precisa ter a biblioteca JQuery na msm pasta.

Download da JQuery > http://jquery.com/

 

Não seria então, fazer o mesmo, mas no hide?

Eu nao entendi essa parte, pode explicar melhor ?

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então cara... não costumo trabalhar muito com jQuery..

mas AJAX é todo um conceito de requisições assincronas ou não ao servidor, usando Javascript, o objeto XMLHttpRequest, usando a linguagem XML ou apenas strings e query strings. Nada tem a ver com efeitos, desses que você fez como accordion.

 

Acho que é algo mais ou menos assim que você precisa:

<script type="text/javascript">
function initMenu(){
	$('#menu ul').hide(
	function() {
		$(this).addClass('umaClasse');
	}
	);
	$('#menu li a').click(
	function() {
		$(this).next().slideToggle('normal');
		$(this).addClass('outraClasse');
	}
	);
}
$(document).ready(function() {initMenu();});
</script>
Veja que eu adicionei uma função ali... a marcação tá bem estranha, você não pode colocar uma DIV dentro de um LI.

LI é um elemento inline, e a DIV é um nivel de bloco.

 

Vi que o probleminha aqui, é que como o jQuery COMEÇA escondendo tudo, já vai aplicando a classe que eu coloquei na function.. faz uma condição IF

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito