• 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

Aruba Cloud - Virtual Private Server VPS
+2 głosów
406 wizyt
pytanie zadane 26 kwietnia 2023 w JavaScript przez zbiku25 Gaduła (3,000 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 2023 przez Gynvael Coldwind Nałogowiec (30,270 p.)
wybrane 26 kwietnia 2023 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 2023 przez zbiku25 Gaduła (3,000 p.)

Super, dziękuję.

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

i teraz działa :)

+1 głos
odpowiedź 26 kwietnia 2023 przez VBService Ekspert (256,600 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 2023 przez Comandeer Guru (606,550 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ź 3,135 wizyt
0 głosów
0 odpowiedzi 103 wizyt
pytanie zadane 17 czerwca 2019 w JavaScript przez Greeenone Pasjonat (16,100 p.)
0 głosów
2 odpowiedzi 673 wizyt
pytanie zadane 16 listopada 2022 w PHP przez zbiku25 Gaduła (3,000 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...