Jump to content

Shieldseg

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Comum

About 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!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.