/* Me encontré con algunos problemas al tratar de cerrar un menú cuando un usuario hace clic fuera de él, vi un par de tutoriales pero nada parece funcionar en este momento. Funciona un poco, pero ahora el botón de cierre real no funciona. más*/
const menuBtn = document.getElementById('hamburger'); const navToggle = document.getElementById('dropdown-content'); let x = false; let menu = false; function menuOpen() { if(!x){ navToggle.classList.toggle('show'); menuBtn.classList.toggle('open'); x = true; menu = true; }else{ navToggle.classList.remove('show'); menuBtn.classList.remove('open'); x = false; } }; document.onmouseup = function() { if(menu){ navToggle.classList.remove('show'); menuBtn.classList.remove('open'); x = false; } /*here's the html part*/ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <title>new project</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Roboto+Mono:wght@100&display=swap" rel="stylesheet"> </head> <body> <div onclick="menuOpen()" id="hamburger"> <div class="menu-btn"></div> </div> </body> </html>```El punto clave es usar un controlador de clic global que verifica el destino del clic y oculta el menú cuando es apropiado.
He aquí un ejemplo:.
const btn = document.getElementsByTagName('button')[0]; const menu = document.getElementsByTagName('ul')[0]; // toggle visibility when the button is clicked btn.onclick = () => menu.classList.toggle('active'); // hide the menu whenever there's a click not inside the menu or on the button document.onclick = ({ target }) => { if ( !(target === btn || target === menu || menu.contains(target)) ) menu.classList.remove('active'); }; ul { border: 1px solid black; display: none; } ul.active { display: block; } <button>toggle menu</button> <ul> <li>Home</li> <li>Sub</li> <li>Sub Two</li> </ul>