Tengo un sitio web con un elemento de menú en una cuadrícula de encabezado y cuando la página se muestra por primera vez, el menú está visible. Tengo un elemento de hamburguesa que quiero usar para alternar la visualización del menú cuando se hace clic en él.

El CSS para el menú es:

 /*==================================================================*/ /* NAVIGATION */ .main-nav { grid-area: N; text-transform: uppercase; } /* Style the nav links */ .main-nav ul { display: grid; grid-template-columns: repeat(4,20vw); } .main-nav li { /* No bullets */ text-align: center; list-style-type: none; min-width: 20vw; } .main-nav a { /* Not italic unlike all other a elements */ text-decoration: none; font-style: normal; }

La hamburguesa usa una función javascript:

 /* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */ function toggleMenu() { let menu = document.getElementById("main-nav"); if (menu.display == "none"){ alert("Hidden"); menu.style.display = "grid"; } else { alert("Displayed"); menu.style.display = "none"; } };

Cuando se carga la página, esta función se usa en el detector de eventos de clic de la hamburguesa:

 document.getElementById("hamburger").addEventListener("click", toggleMenu);

Ahora, lo que sucede es esto: la página se carga, el menú está visible:

Hago clic en la hamburguesa, la alerta me dice que el menú está actualmente visible:

Entonces el menú está oculto:

Sin embargo, si ahora vuelvo a hacer clic en la hamburguesa, aparece un mensaje que me dice que se muestra el menú (!) y no vuelve a aparecer:

Entonces, lo que no entiendo es por qué el estilo del elemento. el estado de visualización es incorrecto cuando el menú muestra claramente: ninguno;?

Por supuesto, esto significa que la función no vuelve a mostrar el menú porque la verificación de estado es incorrecta.

Si necesita más código, hágamelo saber, pero por lo que puedo ver, todo el código involucrado está en la pregunta.

Gracias por adelantado,

Dermot