12

Eu tenho o script abaixo para usar em um menu. Ele troca a visibilidade de um elemento específico pelo seu ID. Ao clicar em um menu principal, abre um submenu.

Existe alguma maneira de alterar o script para que ao clicar em outro menu o submenu anterior feche? Atualmente estão ficando os dois abertos.

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
        }
</script>

<a href="#" onclick="toggle_visibility('menu1');">
    <p>Menu Um</p>
</a>
<div id="menu1" style="display:none;">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</div>

<a href="#" onclick="toggle_visibility('menu2');">
    <p>Menu Dois</p>
</a>
<div id="menu2" style="display:none;">
    <ul>
        <li>Item Um</li>
        <li>Item Dois</li>
        <li>Item Três</li>
    </ul>
</div>

2 Respostas 2

9

A maneira mais rápida de corrigir o seu código é adicionar um ciclo for para pôr todos os menus invisiveis e depois mostrar só o que deve ficar visivel:

function toggle_visibility(id) {
    var e = document.getElementById(id);
    var visivel = e.style.display == 'block';
    var menus = document.querySelectorAll('[id^=menu]');
    for (var i = 0; i < menus.length; i++) {
        menus[i].style.display = 'none';
    };
    if (visivel) e.style.display = 'none';
    else e.style.display = 'block';
}

á sua função. E já agora commo o @Bacco apontou com este acrescento pode tirar-se o if() que fica redundante e deixar sómente: e.style.display = 'block'; (Fiz update à demo)

Demo


A minha sugestão seria remover o script misturado no HTML e usar somente javascript:

var links = document.querySelectorAll('[id^=tituloMenu]');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', toggle_visibility);
}

function toggle_visibility(e) {
    e.preventDefault(); //por precaução
    var idDestino = this.id.split('tituloMenu')[1];
    var el = document.getElementById('menu' + idDestino);
    var visivel = el.style.display == 'block';
    var menus = document.querySelectorAll('[id^=menu]');
    for (var i = 0; i < menus.length; i++) {
        menus[i].style.display = 'none';
    }
    if (visivel) el.style.display = 'none';
    else el.style.display = 'block';
}

Demo

Versão com jQuery
Versão com MooTools

1
  • Funciona Perfeitamente. Só que tem um detalhe quando atualizar não volta com o menu anterior que está Selecionado. Commented 25/07/2016 às 13:19
0

Seu código estava quase correto. O erro estava na atribuição de valor na variável display. Olha o meu abaixo. Funciona perfeitamente.

function aparece(id){
    var e = document.getElementById(id);
    if(e.style.display == "none"){
        e.style.display="block";
    }else{
        e.style.display="none";
    }
}

Ainda utilizei onmouseover e onmouseout para ele identificar quando o mouse estiver em cima ou fora do elemento, sem precisar de click. Fica mais suavê :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .