Zamykanie menu, po nietrafieniu w nie

Question

Cześć,

Mam taki problem, otóż stworzyłem sidebar-menu, które jest otwierane i zamykane za pomocą przycisku. Jednak nie wiem, co zrobić, aby menu po otworzeniu, zamykało się po nietrafieniu w nie. Wiem, że trzeba użyć, czegoś takiego jak "e.target", jednak nie wiem za bardzo jak to podłączyć do addEventListener. Niżej podaje link jak to wygląda:

https://codepen.io/VLeniowy/pen/VNLXWj

Answer 1

Przy kliku wypada sprawdzić, co zostało kliknięte. Jeśli znajduje się to wewnątrz menu lub jest menu, wtedy nie wykonywać żadnej akcji. Coś typu:

document.addEventListener( 'click', function( { target } ) {
	const menu = document.querySelector( '#menu' );

	if ( menu.contains( menu ) || menu === target) {
		return;
	}
		
	menu.classList.remove( 'active' );
} );

Answer 2

Dodaj to do Swojego JS i zobacz czy działa, jak chcesz

document.addEventListener('click', function() {
  const menu = document.querySelector('#menu');
  menu.classList.remove('active');
},true);

Comments

Zamyka okno, tylko jest problem taki, ze po kliknięciu w menu, się ono zamyka oraz nie działa przycisk. :c

---

Powiem Ci szczerze że nie mam pomysłu na tę chwilę. Proponuję zrobienie tego w JQ, będzie łatwiej.

Answer 3

const button = document.getElementById('przycisk');
const menu = document.getElementById('menu');
document.body.addEventListener('click', function(e) {
(e.target.id=="przycisk")?menu.classList.toggle('active'): menu.classList.remove('active');
})

 

Comments

To zamknie menu po kliknięciu w menu ;)

---

Czasami jest to pożądane np. przy stronach onepage.