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

Ukrycie elementu klikając "poza" nim

VPS Starter Arubacloud
0 głosów
77 wizyt
pytanie zadane 26 kwietnia 2023 w JavaScript przez zbiku25 Bywalec (2,940 p.)

Hej,

Próbuję zaprogramować stan, w którym klikając poza określony element, dany element zniknie. Niestety kod nie działa. Uprzejma prośba o pomoc.

Kod JS

var lang;
lang = document.querySelector("#language");

function change()
	{
		if (lang.style.display==="none" || lang.style.display=="" )
		{
			lang.style.display="block";
		}
		else
		{
			lang.style.display="none";
		}
	}
	

document.addEventListener('click', function clickOutside(event) {

  if (lang.contains(event.target)) {

  lang.style.display = 'none';

  }

});

 

2 odpowiedzi

0 głosów
odpowiedź 26 kwietnia 2023 przez Comandeer Guru (599,730 p.)

Tak na oko, to ukrywasz element lang tylko wówczas, gdy zawiera on aktualnie kliknięty element – a warunek powinien być raczej odwrotny (czyli ukrywanie wówczas, gdy NIE zawiera aktualnie klikniętego elementu).

Dodatkowo, zamiast operować bezpośrednio na stylach, można operować na klasach w CSS-ie (np. dzięki temu będziesz w stanie zastąpić cały kod w funkcji change() de facto wywołaniem lang.classList.toggle()).

0 głosów
odpowiedź 26 kwietnia 2023 przez VBService Ekspert (251,210 p.)
edycja 26 kwietnia 2023 przez VBService

Proponuje, sprawdź co zawiera event.target

[ on-line ]

document.addEventListener('click', (e) => {
  if (!e.target.matches('.center')) // w tym kontekście, czego nie zawiera
    lang.classList.remove('show');
});

 

 

BTW, sprawdź też taki zapis w ramach ciekawostki, on-line

function change() {
  if (!lang.style.display || lang.style.display == 'none' )
    ...
}

 

Podobne pytania

0 głosów
0 odpowiedzi 156 wizyt
pytanie zadane 25 stycznia 2018 w C i C++ przez GregTheBlackFox Nowicjusz (120 p.)
0 głosów
1 odpowiedź 153 wizyt
pytanie zadane 14 lutego 2019 w JavaScript przez Kinga Nowicjusz (210 p.)
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 3 sierpnia 2019 w JavaScript przez Magicone Nałogowiec (45,100 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...