Skip to main content
1 de 2

Fazer submenu aparecer ao clicar no menu usando javascript

Olá! Criei um menu com submenus que ao clicar sobre ele, este aparece. Ao clicar fora, ele esconde, assim como clicar nele novamente. Clicando em outros menus, o submenu também some. Gostaria de compartilhar o código aqui, pois muita gente tem este problema e quer usar javascript sem frameworks. Também estou compartilhando para que sejam feitas críticas, pois sou programador iniciante. Comecei a programar há mais ou menos três meses. Origado!

As funções mostra serão usadas como onclick na própria

  • que contém uma . As funções esconde serão todas usadas como onclick no .

    Desculpe-me a enrolação.

    function mostra1 () {
    if (document.getElementById("submenu2").style.display == "table") {
        document.getElementById("submenu2").style.display = "none";
    }
    
    if (document.getElementById("submenu3").style.display == "table") {
        document.getElementById("submenu3").style.display = "none";
    }
    
    if (document.getElementById("submenu4").style.display == "table") {
        document.getElementById("submenu4").style.display = "none";
    }
    
    
    if (document.getElementById("submenu1").style.display == "table") {
        document.getElementById("submenu1").style.display = "none"
        return;
    }
    
    document.getElementById("submenu1").style.display = "table";
    }
    
    function mostra2 () {
    if (document.getElementById("submenu1").style.display == "table") {
        document.getElementById("submenu1").style.display = "none";
    }
    
    if (document.getElementById("submenu3").style.display == "table") {
        document.getElementById("submenu3").style.display = "none";
    }
    
    if (document.getElementById("submenu4").style.display == "table") {
        document.getElementById("submenu4").style.display = "none";
    }
    
    
    if (document.getElementById("submenu2").style.display == "table") {
        document.getElementById("submenu2").style.display = "none"
        return;
    }
    document.getElementById("submenu2").style.display = "table";
    }
    
    function mostra3 () {
    if (document.getElementById("submenu1").style.display == "table") {
        document.getElementById("submenu1").style.display = "none";
    }
    
    if (document.getElementById("submenu2").style.display == "table") {
        document.getElementById("submenu2").style.display = "none";
    }
    
    if (document.getElementById("submenu4").style.display == "table") {
        document.getElementById("submenu4").style.display = "none";
    }
    
    
    if (document.getElementById("submenu3").style.display == "table") {
        document.getElementById("submenu3").style.display = "none"
        return;
    }
    document.getElementById("submenu3").style.display = "table";
    }
    
    function mostra4 () {
    if (document.getElementById("submenu1").style.display == "table") {
        document.getElementById("submenu1").style.display = "none";
    }
    
    if (document.getElementById("submenu2").style.display == "table") {
        document.getElementById("submenu2").style.display = "none";
    }
    
    if (document.getElementById("submenu3").style.display == "table") {
        document.getElementById("submenu3").style.display = "none";
    }
    
    
    if (document.getElementById("submenu4").style.display == "table") {
        document.getElementById("submenu4").style.display = "none"
        return;
    }
    document.getElementById("submenu4").style.display = "table";
    }
    
    
    i1 = 0;
    function esconde1 () {
    if ((document.getElementById("submenu1").style.display == "table") && (i1 == 
    1)) {
        document.getElementById("submenu1").style.display = "none";
        
    }
    i1 = 0;
    
    if ((document.getElementById("submenu1").style.display == "table") && (i1 == 
    0)) {
        i1 = 1;
    }
    }
    
    
    i2 = 0;
    function esconde2 () {
    if ((document.getElementById("submenu2").style.display == "table") && (i2 == 
    1)) {
        document.getElementById("submenu2").style.display = "none";
        
    }
    i2 = 0;
    
    if ((document.getElementById("submenu2").style.display == "table") && (i2 == 
    0)) {
        i2 = 1;
    }
    }
    
    
    i3 = 0;
    function esconde3 () {
    if ((document.getElementById("submenu3").style.display == "table") && (i3 == 
    1)) {
        document.getElementById("submenu3").style.display = "none";
        
    }
    i3 = 0;
    
    if ((document.getElementById("submenu3").style.display == "table") && (i3 == 
    0)) {
        i3 = 1;
    }
    }
    
    
    i4 = 0;
    function esconde4 () {
    if ((document.getElementById("submenu4").style.display == "table") && (i4 == 
    1)) {
        document.getElementById("submenu4").style.display = "none";
        
    }
    i4 = 0;
    
    if ((document.getElementById("submenu4").style.display == "table") && (i4 == 
    0)) {
        i4 = 1;
    }
    }