Estoy tratando de crear un menú que aparecerá debajo de la barra de navegación, me gustaría que el botón y el logotipo estén espaciados y quiero que los elementos aparezcan debajo. ¿Cómo puedo conseguir esto? Ahora tengo 3 elementos seguidos en lugar de los elementos de navegación que aparecen a continuación. Mi código parece tener errores y tengo que presionar dos veces el botón para que suceda algo. ¿Por qué está pasando esto?
const btn = document.querySelector('button'); btn.addEventListener("click", () => { const navItems = document.querySelector('.nav-items'); if (navItems.style.display == "none") { navItems.style.display = "block" } else { navItems.style.display = "none"; } }) nav { display: flex; align-items: center; } .nav-items { margin-left: auto; list-style: none; display: flex; } li { padding: 10px; } button { display: none; } @media only screen and (max-width: 900px) { .nav-items { display: none; } button { display: block; margin-left: auto; } } <nav> <h2>Logo </h2> <button> Toggle Mobile </button> <ul class="nav-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </nav>La primera vez que se ejecuta, navItems.style.display no es igual a "ninguno", está vacío, por lo que la lógica de presentación no funciona.
Sería mejor invertir la lógica:
if (navItems.style.display == "block") { navItems.style.display = "none"; } else { navItems.style.display = "block" } Para comenzar con el diseño, agregue flex-wrap: wrap to nav y width: 100% to .nav-items .
Si lee style.display (o, de hecho style.anything ), se lee desde el atributo de style del elemento. <ul class="nav-items"> se convierte en <ul class="nav-items" style="display:none"> después del primer clic (la parte else de la condición) y ahora la parte if puede evaluarse como true . En mi opinión, estaría mucho mejor con una clase CSS y navItems.classList.toggle('the-class-that-handles-visibility') .
Dicho esto, ¿no debería navItems la visibilidad de los elementos de navegación por la consulta de medios en primer lugar? Realmente no veo un caso de uso para JS aquí, a menos que esté malinterpretando su pregunta.