Vanilla JS (Dropdown)

Question

Witajcie. Wiecie jak przerobić lub znacie podobny kod jak ten (ten jest w Jquery a ja chcę coś podobnego tylko 100% w Vanilla JS)

 

$("#dropdown").on("click", function(e){
e.preventDefault();
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});

 

Answer 1

zaznaczasz element z id poprzez document.getElementById, sprawdzasz czy istnieje (if element !== null)

do elementu dodajesz addEventListener na click

w środku callbacku pierwsze co robisz to wywołujesz event.preventDefault później sprawdzasz klasy

jeśli element.classList.contains("open") to: usuwasz klasę element.classList.remove("open")

w przeciwnym wypadku: dodajesz element.classList.add("open")

(albo używasz element.classList.toggle("open") do przełączania klas)

 

jeśli chodzi o animację slideUp i slideDown to podmianka klas i animacje w css (np z animate.css) mogły by się przydać :P

Comments

animate.css się nie przyda bo animacja nie potrzebna lepiej opacity: 0; pointer-events: none; a potem opacity: 1, ponter-events: all;