Quiero alternar una barra de navegación al hacer clic con un botón y, si la barra de navegación ya está activa, quiero desactivarla cuando el usuario haga clic en cualquier lugar. Todos los detectores de eventos están conectados y el código de alternancia funciona normalmente, pero la implementación de la función "hacer clic en cualquier parte de la pantalla para apagar" no funciona.
Editar: ahora puedo alternar haciendo clic en cualquier lugar, pero no puedo alternar usando el botón, solo puedo encenderlo y no apagarlo.
const button = document.querySelector('button.mobile-menu-button'); const menu = document.querySelector('.mobile-menu'); let menuActive = false; button.addEventListener('click', (e) => { e.stopPropagation(); if (!menuActive) { menu.classList.toggle('hidden'); menuActive = true; } }); window.addEventListener('click', () => { if (menuActive) { menu.classList.toggle('hidden'); menuActive = false; } });El problema es que cuando hace clic en el botón, también está haciendo clic en la ventana al mismo tiempo. Debe usar stopProgopation() .
Aquí hay una solución. Cuando se hace clic en el botón, se muestra el menú. Si el usuario hace clic en la pantalla en otro lugar que no sea el botón, el menú desaparecerá.
<div id="menu" class="mobile-menu hidden">This is the menu</div> <button class="mobile-menu-button">Button</button> <script> const button = document.querySelector('button.mobile-menu-button'); const menu = document.getElementById('menu'); let menuActive = false; button.addEventListener('click', (e) => { e.stopPropagation(); if (!menuActive) { menu.classList.toggle('hidden'); menuActive = true; } }); window.addEventListener('click', () => { if (menuActive) { menu.classList.toggle('hidden'); menuActive = false; } }); </script> <style> .mobile-menu { display: block; } .hidden { display: none; } </style>Descubrí que no necesitaba una condición para el botón en sí, solo la ventana. Gracias a todos por ayudar.
const button = document.querySelector('button.mobile-menu-button'); const menu = document.querySelector('.mobile-menu'); let menuActive = false; button.addEventListener('click', (e) => { e.stopPropagation() menu.classList.toggle('hidden'); menuActive = true; }); window.addEventListener('click', () => { if (menuActive) { menu.classList.toggle('hidden'); menuActive = false; } });