Wpis z mikrobloga

Mam takie pytanie co do czystego JSa.

Mam elementy chowanego menu (w wersji mobilnej) i domyślnie w mobilnych media query mają w cssach poustawiane visibility jako hidden.

I teraz odnajujde je w JSie -
var menu = document.querySelectorAll(" .menuBar > li");
var deeperMenu = document.querySelectorAll(".menuBar ul li")

no i nakłądam event :
buttonMenu.addEventListener("click", function() { //event for menuButtonMobile - if menu is hidden, show menu, and if menu is shown and also deepermenu is shown - hide both
for (var i = 0; i < menu.length; i++) {
if (menu[i].style.visibility == "hidden") {
menu[i].style.visibility = "visible";
} else {
allButonsHide();
return true;
}
}
})
(jest głębsza, ale no obrazuje o co chodzi).
I tak - mimo iż w podglądzie przeglądarki elementy mają również wskazane "hidden", to JS tego nie widzi i rozwijanie menu działa dopiero za 2 klikiem - za 1-szym narzuci im u siebie visibility hidden dopiero. Jak próbowałem inne funkcje pisać, to wywalał błąd, że nie jest możliwe odczytanie właściwości visibility hidden z tych elementów

Póki co miałem krótką pętlę, która przy ładowaniu skryptu iteruje po nich i narzuca im hidden i wtedy menu działa od 1 kliknięcia.
Tylko jakbym to mógł zrobić poprawnie? Co robię źle? Bo trochę mi to miesza w konteście zupełnej zmiany styli na większe urządzenia. I wolałbym unikać odpalania skryptu tylko na małych urządzeniach (JS-owe media query) - chyba, że to słuszna droga?

#frontend #naukaprogramowania #javascript
  • 5
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@Kain_to_Charlie_a_Delta_to_Kain: tak na przyszłość menu[i].style.visibility zwraca obiekt CSSStyleDeclaration która reprezentuje jedynie atrybut stylu inline wskazanego elementu a nie w arkuszu styli dlatego też działało Ci dopiero za drugim razem ( ͡° ͜ʖ ͡°)
  • Odpowiedz