Ir para conteúdo

Shieldseg

Members
  • Total de itens

    1
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre Shieldseg

  1. Shieldseg

    Problemas com myfunction

    Boa Noite! Sou iniciante em Javascript e novo aqui no fórum, estou com um problema para um site de um cliente. não estou conseguindo executar duas "Function" que encontrei no w3c ao mesmo tempo, está dando algum conflito: Segue o exemplo do meu problema a baixo: <!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } </style> </head> <body> <p>Click on the Menu Icon to transform it to "X":</p> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> <div class="dropdown"> <button id="myBtn" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> <script> // Get the button, and when the user clicks on it, execute myFunction document.getElementById("container").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); </script> <script> function myFunction(x) { x.classList.toggle("change"); } </script> </body> </html> Quando um comando funciona, o outro não, se alguém puder dar uma ajuda! desde já, agradeço!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.