Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
adicionou 255 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

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 .

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

    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;
    }
    }
    

    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;
      }
    }

    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 .

  • 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;
    }
    }
    

    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>.

    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;
      }
    }

    Fonte Link

    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;
    }
    }