• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zamykanie menu, po nietrafieniu w nie

Object Storage Arubacloud
0 głosów
254 wizyt
pytanie zadane 2 kwietnia 2019 w JavaScript przez VLeniowy Nowicjusz (190 p.)
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

3 odpowiedzi

+2 głosów
odpowiedź 2 kwietnia 2019 przez Comandeer Guru (602,560 p.)

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' );
} );
+1 głos
odpowiedź 2 kwietnia 2019 przez olekjs Gaduła (4,540 p.)

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);
komentarz 2 kwietnia 2019 przez VLeniowy Nowicjusz (190 p.)
Zamyka okno, tylko jest problem taki, ze po kliknięciu w menu, się ono zamyka oraz nie działa przycisk. :c
komentarz 2 kwietnia 2019 przez olekjs Gaduła (4,540 p.)
Powiem Ci szczerze że nie mam pomysłu na tę chwilę. Proponuję zrobienie tego w JQ, będzie łatwiej.
0 głosów
odpowiedź 2 kwietnia 2019 przez pablop76 VIP (123,180 p.)
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');
})

 

komentarz 2 kwietnia 2019 przez Comandeer Guru (602,560 p.)
To zamknie menu po kliknięciu w menu ;)
komentarz 3 kwietnia 2019 przez pablop76 VIP (123,180 p.)
Czasami jest to pożądane np. przy stronach onepage.

Podobne pytania

0 głosów
1 odpowiedź 1,928 wizyt
pytanie zadane 18 lipca 2017 w JavaScript przez Alterwar Dyskutant (7,650 p.)
0 głosów
1 odpowiedź 283 wizyt
pytanie zadane 28 maja 2019 w JavaScript przez Kerto Nowicjusz (240 p.)
0 głosów
2 odpowiedzi 895 wizyt
pytanie zadane 27 lutego 2018 w JavaScript przez Konfeusz Bywalec (2,810 p.)

92,666 zapytań

141,564 odpowiedzi

320,019 komentarzy

62,031 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...