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 <li>
que contém uma <ul>
. As funções esconde serão todas usadas como onclick
no <body>
.
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;
}
}