Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Carregando comentários...