<input type="checkbox" id="menu-bars"> <label for="menu-bars" class="nav-button" id="nav-button"> <span></span> <span></span> <span></span> </label> <script> const NavBtn = document.querySelector(".nav-button"); const NavShow = document.querySelector(".navbar"); NavBtn.addEventListener("click", function(){ NavShow.classList.toggle("slide"); }) document.onclick = function(e){ if(e.target.querySelector !== ".nav-button, input" && e.target.querySelector !== ".navbar") { NavShow.classList.remove("slide"); } } </script>No entiendo muy bien tu pregunta. ¿Está tratando de ocultar el elemento? Si es así, hay muchos enfoques. Intenta usar el atributo oculto (Uno de los más básicos):
let element = document.querySelector('.navbar') window.onclick = () => { let condition = ... // bool (true or false) element.setAttribute('hidden', condition) }Prueba esto
document.addEventListener('click', (event) => { const isClickedOutside = !document.querySelector('.navbar').contains(event.target); // Like @sum117 said document.querySelector('.nav-button').setAttribute('hidden', isClickedOutside) })El HTML no estaba completo .navbar no está incluida, así que supuse que envuelve todo. Eliminé la casilla de verificación porque un menú desplegable se ve obstaculizado en este tipo de diseño y usando JavaScript.
Agregue una clase a todos los elementos que sean neutrales, es decir, elementos en los que puede hacer clic pero no sucede nada. Luego vincule el evento de clic al document :
documnet.addEventListener('click', ... Cualquier cosa que tenga clase .nav no hace nada:
if (e.target.matches('.nav')) { return; }Si se hace clic en el botón, trátelo como una palanca:
if (e.target.matches('.nav-button')) { return NavShow.classList.toggle('slide'); }Si se hace clic en cualquier otra cosa, cierre el menú:
NavShow.classList.remove('slide'); Tenga en cuenta que se devuelven las dos primeras condiciones. Lo que eso hace es cortocircuitar la función, lo que significa que se cierra y no continúa con la siguiente condición. Si desea que <span> se cierre cuando se hace clic, simplemente elimine la clase .nav de ellos en el HTML.
const NavShow = document.querySelector(".navbar"); document.addEventListener("click", function(e) { const chx = document.querySelector('#menu-bars'); if (e.target.matches('.nav')) { return; } if (e.target.matches('.nav-button')) { return NavShow.classList.toggle('slide'); } NavShow.classList.remove('slide'); }) .navbar { outline: 1px dashed green } .nav-button { display: inline-block; outline: 1px dashed blue } .nav-button span { display: none; outline: 1px dashed red; } .slide span { display: block; } <nav class='navbar nav'> <label class="nav-button">Open<br> <span class='nav'>1</span> <span class='nav'>2</span> <span class='nav'>3</span> </label> </nav>