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

Onclik uruchamia się dopiero po drugim klinięciu

Hosting forpsi easy 1 pln
+2 głosów
189 wizyt
pytanie zadane 26 kwietnia w JavaScript przez zbiku25 Bywalec (2,940 p.)

Cześć,

Czy ktoś jest w stanie mi powiedzieć dlaczego pasek wyboru języka otwiera się dopiero po drugim kliknięciu na niego?

JS

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

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

HTML

<div onclick="change()" class="lang">
  <div class="center">PL</div>
		<ul id="language" class="lang-choice">
				<li><a href="#">EN</a></li>
				<li><a href="#">DE</a></li>
		</ul>
</div>

 

CSS

.lang
{
	margin-right:50px;
	position:relative;
	cursor:pointer;
}

.lang-choice
{
	position:absolute;
	list-style:none;
	top:100%;
	left:0;
	padding:0;
	margin:0;
	display:none;
}

.lang-choice li
{
	position:relative;
	left:0;
}

.lang-choice li a
{
	display:flex;
	align-items:center;
}


.lang-choice li:hover
{
	text-decoration:underline;
}

.lang-choice li:nth-child(1)
{
	padding:7px 0;
}

 

2 odpowiedzi

+4 głosów
odpowiedź 26 kwietnia przez Gynvael Coldwind Nałogowiec (25,710 p.)
wybrane 26 kwietnia przez zbiku25
 
Najlepsza

Przy pierwszym kliknięciu warunek

if (lang.style.display==="none")

nie będzie spełniony (bo nie masz dla tego elementu ustawionego stylu display na none; masz ustawiony styl w klasie CSS, ale NIE na elemencie), więc wykona się:

        else
        {
            lang.style.display="none";
        }

Dopiero przy drugim kliknięciu lang.style.display jest ustawiony na "none", więc zostanie przestawiony na "block".

Możesz po prostu dodać w HTML sobie: style="display: none", albo lepiej - zmienić warunek tak, żeby sprawdzał czy lang.style.display jest w ogóle ustawiony (czy jest pustym stringiem).

1
komentarz 26 kwietnia przez zbiku25 Bywalec (2,940 p.)

Super, dziękuję.

Dodałem drugi warunek: .. || lang.style.display==""

i teraz działa :)

+1 głos
odpowiedź 26 kwietnia przez VBService Ekspert (246,010 p.)

Możesz też operować bezpośrednio na klasach css (zamiast "inline style"), np. za pomocą matches

[ on-line ]

.lang-choice {
  ...
  display:none;
}
.lang-choice.show {
  display: block;
}
var lang;
lang = document.querySelector("#language");

function change()
{
  if (lang.matches('.show'))
    lang.classList.remove('show');
  else
    lang.classList.add('show');
}

 

komentarz 26 kwietnia przez Comandeer Guru (596,220 p.)

Tylko po co w tak skomplikowany sposób, skoro można to zrobić w jednej linijce:

function change() {
	lang.classList.toggle( 'show' );
}

Nawet, jakbyśmy chcieli z jakiegoś powodu rozbić to na warunek z remove() i add(), to classList zawiera metodę do sprawdzania, czy element ma daną klasę:

function change() {
	if ( lang.classList.contains( 'show' ) ) {
		lang.classList.remove( 'show' );
	} else {
		lang.classList.add( 'show' );
	}
}

Podobne pytania

0 głosów
1 odpowiedź 2,541 wizyt
0 głosów
0 odpowiedzi 74 wizyt
pytanie zadane 17 czerwca 2019 w JavaScript przez Greeenone Pasjonat (16,100 p.)
0 głosów
2 odpowiedzi 152 wizyt
pytanie zadane 16 listopada 2022 w PHP przez zbiku25 Bywalec (2,940 p.)

92,092 zapytań

140,751 odpowiedzi

317,718 komentarzy

61,409 pasjonatów

Advent of Code 2023

Top 15 użytkowników

  1. 0p. - adrian17
  2. 0p. - wizarddos
  3. 0p. - Dewidos
  4. 0p. - Marcin Jasiński
  5. 0p. - Mateusz Sobala
  6. 0p. - Mateusz
  7. 0p. - NOONE
  8. 0p. - Adam Śpiewak
  9. 0p. - WhiskeyTaster
  10. 0p. - Rafał Budzis
  11. 0p. - Krzysztof Zawadka
  12. 0p. - tokox
  13. 0p. - TheLukaszNs
  14. 0p. - mjavor
  15. 0p. - Jakub Stępień
Szczegóły i pełne wyniki

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 w koszyku, uzyskując rabat aż -50% (jeszcze tylko dziś 30.11 z okazji Black Week, a potem będzie to 30%) na bilety w wersji "Standard"! Więcej informacji na temat akademii znajdziecie tutaj. Dziękujemy Sekurakowi za tak fajną zniżkę dla 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 15% 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!

...