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 quando 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>
Pergunta
Guest Menu Sanfona
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 quando 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
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.