Estoy tratando de ocultar y mostrar .sub-menu haciendo clic en el ancla .menu, solo funciona mostrándolo. Si presiono para ocultar no tiene reacción, ¿qué se supone que debo hacer y cuál es el error?
Aquí está el código.
HTML:
<div class="menu"> <a href="javascript:myFunction();" class="nav" onclick="myFunction()"> <div class="unu"></div> <div class="doi"></div> <div class="trei"></div> </a> <div id="sm"> <a href="#">FAQ</a> <a href="#">Support</a> <a href="#">Features</a> </div> </div>CSS:
nav div{ height:7px; background-color: white; margin: 5px 0; border-radius: 25px; } .menu { position: absolute; display:inline-block; text-align:center; right:130px; top:60px; } .unu { width: 45px; } .doi { width: 20px; } .trei { width:35px; } #sm { display: none; }JS:
function myFunction() { var x = document.getElementById("sm") if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }Si utiliza
console.log(`${x.style.display}`)conseguirás
<empty string>en tu primer intento no
nonepor eso es necesario configurar
function myFunction() { var x = document.getElementById("sm") if (x.style.display === "" || x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }Agregaré un evento console.log in window.load para ver cuál es el valor del elemento sm cuando la página se carga al principio. Y también puede verificar cuáles son las nuevas propiedades cuando hace clic en el botón.
const myDiv = document.getElementById('sm'); const controlButton = document.querySelector('button') window.addEventListener('load', () => { console.log(`${myDiv.style.display}`); }) controlButton.addEventListener('click', () => { if (myDiv.style.display === "" || myDiv.style.display === "none") { myDiv.style.display = "block"; } else { myDiv.style.display = "none"; } console.log(`${myDiv.style.display}`); }) *, *::before, *::after{ box-sizing: border-box; } body { font-family: sans-serif; min-height: 100vh; margin: 0; background-color: bisque; } nav div{ height:7px; background-color: white; margin: 5px 0; border-radius: 25px; } .menu { position: absolute; display:inline-block; text-align:center; right:130px; top:60px; } .unu { width: 45px; } .doi { width: 20px; } .trei { width:35px; } #sm { display: none; } button{ position: absolute; width: 5rem; height: 5rem; background-color: greenyellow; top: 5rem; left: 5rem; } <div class="menu"> <div class="unu"></div> <div class="doi"></div> <div class="trei"></div> </a> <div id="sm"> <a href="#">FAQ</a> <a href="#">Support</a> <a href="#">Features</a> </div> </div> <button>Click me</button>En lugar de usar la propiedad de display , puede crear una .class para alternar, que es bastante simple que verificar los estilos.
const toggle = document.querySelector('.toggle'); const hidden = document.querySelector('.hidden'); toggle.addEventListener('click', event => { // because anchor's default behaviour is redirecting event.preventDefault(); hidden.classList.toggle('revealed'); }); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; } .toggle, .hidden { font-family: sans-serif; font-size: 1.5rem; } .hidden { position: absolute; margin-top: 6rem; display: none; } .hidden.revealed { display: block; } <a href="#" class="toggle"> Click Me For Toggling </a> <p class="hidden"> I was hidden Initially </p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Help</title> <style> nav div{ height:7px; background-color: white; margin: 5px 0; border-radius: 25px; } .menu { position: absolute; display:inline-block; text-align:center; right:130px; top:60px; } .unu { width: 45px; } .doi { width: 20px; } .trei { width:35px; } .sm { display: none; } .show { display:block; } </style> </head> <body> <div class="menu"> <a href="#"> <div class="unu">lll</div> <div class="doi"></div> <div class="trei"></div> </a> <div class="sm"> <a href="#">FAQ</a> <a href="#">Support</a> <a href="#">Features</a> </div> </div> <script> var show = document.querySelector("a") var x = document.querySelector(".sm") show.addEventListener('click',()=>{ x.classList.toggle("show") }) </script> </body> </html>¡Hice muchos cambios! Tú primero uso Js Vanilla j. Me basé en el evento "clic" en la etiqueta "a". Al dejar su función en el enlace, funciona pero, una vez que aparece, desaparece por sí solo nuevamente. Lo que significa que no sobrescribe la propiedad de visualización que estaba en la clase sm. En resumen, funciona bien; puedes comprobar en snipett