Ir para conteúdo

POWERED BY:

Arquivado

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

Gdias

[Resolvido] Fechar/Abrir DIV e mudar class do Título

Por , em Javascript

Recommended Posts

Gdias    0

Gdias
Postado

Salve amigos,

 

Tenho um quebra-cabeças nas mãos e preciso de ajuda.

Vou explicando o problema por partes e postando o código ok!?

 

Vamos lá!

 

Tenho um Título que quando clicado, abre uma DIV e muda a class deste Título

 

<h1>
   <a href="java script:void(0)" onclick="toggleH1(this);">
   <span><img src="images/ico-setaLeft.png" alt="Abrir" /> Título</span>
   </a>
</h1>

Aabixo deste Título abre a DIV PAi que contem um Sub-Título e uma DIV FILHO

 

<div style="display:none;">
							
	<h2>
	<a href="#" onclick="toggle('subSecao1');">Sub-Título</a>
	</h2>
							
	<div id="subSecao1" class="contentBox" >
							
	<div class="contentCont">					
				  TEXTO
	</div>
	
				// botão de fechar DIV								
	<div class="contentClose" align="right" style="margin-bottom:-4px;">
		<a href="#" onclick="toggle('subSecao1');">
		<img src="images/contentUp.png" alt="Fechar"/>
		</a>
			   </div>
								
</div>

 

Notem que dentro da DIV FILHO existe um botão que deve fechar a DIV - e ele realmente fecha, mas ai é que está o meu problema, preciso que a DIV PAI seja fechada e que o Título mude a classe.

 

Segue os códigos JavaScript

 

function toggleH1(link) {
	var h1 = link.parentNode;
	if (h1.className == "selectedH1") {
	h1.className = "";
	toggleFilho(link, "images/ico-setaDown.png", "images/ico-setaLeft.png");
	return;
	}
	for (var node = h1.parentNode.firstChild; node; node = node.nextSibling) {
		if (node != h1 && node.nodeName.toLowerCase() == "h1" && node.className == "selectedH1") {
		node.className = "";
		var otherLink = node.getElementsByTagName("a")[0];
		toggleFilho(otherLink, "images/ico-setaDown.png", "images/ico-setaLeft.png");
	}
	}
	h1.className = "selectedH1";
	toggleFilho(link, "images/ico-setaDown.png", "images/ico-setaLeft.png");
}


function toggleFilho(link, imgOpen, imgClosed) {
	var obj = link.parentNode.nextSibling;
	while (obj && obj.nodeName.toLowerCase() != "div") {
		obj = obj.nextSibling;
	}
	var img = link.getElementsByTagName("img")[0];
	if (obj) {
		if (obj.style.display == "none") {
		obj.style.display = "";
		if (img && imgOpen) {
			img.src = imgOpen;
	}
	} else {
	   obj.style.display = "none";
	if (img && imgClosed) {
	   img.src = imgClosed;
	}
	}
	}
}


function toggle(obj) {
	var el = typeof obj == "string" ? document.getElementById(obj) : obj;
		
	if ( el.style.display != 'none' ) {
		 el.style.display = 'none';
				
	}
	else {
		 el.style.display = '';
	}
}

 

Esse código não foi escrito por mim e sim pelo antigo programador que trabalhava aqui antes de mim ok!

 

Desde já agradeço a força!

 

Abraços,

Gustavo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

hum..

num olhei o código mas

 

<html>
<head>
<style>
<!-
.normallink {color: #336699; text-decoration: none}
.ativolink {color: #0099ff; text-decoration: underline}
->
</style>
<title>Exemplo de menu com DHTML</title>
</head>
<body>
<p>
<a href="menu.htm" class="normallink"
	 OnMouseOver="className = 'ativolink';"
	 OnMouseOut="className = 'normallink';">Empresa</a> 
<a href="menu.htm" class="normallink"
	 OnMouseOver="className = 'ativolink';"
	 OnMouseOut="className = 'normallink';">Clientes</a> 
<a href="menu.htm" class="normallink"
	 OnMouseOver="className = 'ativolink';"
	 OnMouseOut="className = 'normallink';">Ajuda</a> 
</p>
</body>
</html>

acho q isso pode te ajudar pelo q você falo no tótulo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gdias    0

Gdias
Postado

Salve Vadio,

 

Até resolveria, mas meu problema era implementar no código existente.

Mas meu cliente mudou de idéia e ficará do jeito que está.

 

Valeu a força!

 

Abração!

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