Ir para conteúdo

POWERED BY:

Arquivado

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

GnomO!

Menu Sanfona

Por , em Javascript

Recommended Posts

GnomO!    0

GnomO!
Postado

Olá galera...

Seguinte eu fiz um menu sanfona aqui, ele ta funcionando perfeito, só que eu queria colocar

mais um detalhe nele, por exemplo a pessoa clica no link pai e assim abre os links

filhos executando a função abre(), só que qnd clico no link pai de novo eu queria que fechasse o mesmo.

 

Função abre()

function abre(e){l=getSource(e);fecharTudo();	if(l.parentNode.className=='escondido'){ // ao clicar no link pai mostra os filhos que estao escondidos		l.parentNode.className='';	} else if(l.parentNode.className=='') { // se ao clicar a class do link pai estiver vazia esconde os filhos		l.parentNode.className='escondido';	}}

Segue código:

 

 

<html><head>	<title>Menu Sanfona</title><style>*,html,body {	border:0px;	margin:0px;	padding:0px;	font-family:Tahoma;	font-size:13px;	font-weight:normal;}body {	margin:5px;}div {	margin:10px;	width:200px;	background:#a1bbd2;}ul#menu, ul#menu li ul {	list-style:none;	padding:0;	margin:0;}ul#menu li {	border-bottom:1px solid black;}ul#menu li ul li {	border-bottom:0;}ul#menu li ul {	background:#DDEAF5;}ul#menu li a {	display:block;	padding:2px;	text-decoration:none;	color:#fff;}ul#menu li.escondido ul {	display:none;}</style><script>function addEvent(o,evtype,fn){	if(o.addEventListener){		o.addEventListener(evtype,fn,true)	}else{		o.attachEvent("on"+evtype,fn)	}}function getSource(e){	if(typeof e=="undefined")e=window.event	var target=e.target ? e.target : e.srcElement	if(target.nodeType==3)target=target.parentNode	return target}function fecharTudo() {var menu=document.getElementById('menu');	for(var i=0;i<menu.childNodes.length;i++){		if(menu.childNodes[i].nodeType==1){			menu.childNodes[i].className='escondido';		}	}}function abre(e){l=getSource(e);fecharTudo();	if(l.parentNode.className=='escondido'){		l.parentNode.className='';	} else {		l.parentNode.className='escondido';	}}function init() {fecharTudo();var menu=document.getElementById("menu");	for(var i=0;i<menu.childNodes.length;i++){		if(menu.childNodes[i].nodeType==1){			addEvent(menu.childNodes[i].childNodes[0],"click",abre);		}	}}addEvent(window,'load',init);</script></head><body>	<div>		<ul id="menu">			<li><a href="java script:void(0);">Página Principal</a>				<ul>					<li>Link 01</li>					<li>Link 02</li>				</ul>			</li>			<li><a href="java script:void(0);">Página Principal</a>				<ul>					<li>Link 01</li>					<li>Link 02</li>				</ul>			</li>			<li><a href="java script:void(0);">Página Principal</a>				<ul>					<li>Link 01</li>					<li>Link 02</li>				</ul>			</li>			<li><a href="java script:void(0);">Página Principal</a>				<ul>					<li>Link 01</li>					<li>Link 02</li>				</ul>			</li>		</ul>	</div></body></html>

Desde já agradeço;

GnomO

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