W tym blogu, mam zamiar stworzyć akordeon używając natywnego javascript. Żadna biblioteka jak jQuery nie jest wymagana. JQueryUI ma wbudowany komponent akordeonu, który jest świetny w użyciu. Ale jako odpowiedzialny deweloper, powinniśmy również wiedzieć, jak stworzyć akordeon za pomocą czystego javascriptu. Jeśli nie wiesz co to jest akordeon to spójrz na jquery one tutaj.
Rozłóżmy komponent na mniejsze kroki.
- Akordeon zawiera listę paneli.
- Każdy panel ma dwa komponenty, nagłówek & ciało.
- Komponent nagłówka wszystkich paneli jest zawsze widoczny.
- Panel może być rozwijany lub zwijany.
- Gdy panel jest rozwijany, jego komponent ciała staje się widoczny.
- Tylko jeden panel może być rozwinięty w tym samym czasie.
- Gdy inny panel jest rozwinięty, komponent ciała ostatniego panelu ukrywa się.
Zbudujmy komponent małymi krokami.
Krok 1 :- Zaprojektuj podstawowy HTML
Utwórzmy trochę podstawowego html, który tworzy listę paneli z nagłówkiem & body.
Powyższy html zawiera listę paneli. Każdy panel ma nagłówek i element ciała. Obecnie wszystko jest widoczne.
Krok 2 :- Zdefiniuj trochę CSS aby obsłużyć widoczność
Utwórzmy dwie klasy CSS aby zdefiniować widoczność ciała.
Domyślnie, chcemy ukryć całe ciało panelu zgodnie z wymaganiami. Teraz musimy pokazać tylko rozszerzony element w danym momencie. Dodamy klasę active w div panelu aby uczynić go widocznym.
Krok 3: – Użycie CSS w HTML
Po dodaniu CSS w naszym HTML, kod będzie wyglądał następująco
Teraz wszystkie elementy panelu są ukryte oprócz pierwszego. Stworzyliśmy nasz podstawowy komponent akordeonowy. Musimy użyć trochę javascript, aby uczynić go w pełni funkcjonalnym.
Krok 4: – Dodawanie zdarzeń kliknięcia
Dodamy zdarzenie kliknięcia na każdym panelu, które zmieni widoczność panelu.
JS Fiddle link tutaj
funkcjainitAccordion jest zdefiniowana do inicjalizacji komponentu akordeonowego. Umieszcza ona zdarzenie kliknięcia na każdym panelu. Kiedy panel jest kliknięty, usuwa aktywną klasę z bieżącego aktywnego panelu i dodaje ją do nowego panelu. Domyślnie, pierwszy panel jest aktywny. Możemy uczynić dowolny panel domyślnie aktywnym, przekazując element panelu do funkcji showPanel.
Udało nam się stworzyć nasz akordeon. Jest to tylko bardzo podstawowy model akordeonu, ale obejmuje on główną funkcjonalność.
Możemy uczynić go bardziej fantazyjnym poprzez dodanie ładnych stylów css, animacji i ikon. Możemy również uczynić go bardziej zorientowanym na wydajność poprzez implementację delegacji zdarzeń & buforowania bieżących aktywnych elementów. Odnieś się do mojego bloga o zdarzeniach, aby dowiedzieć się o nich w szczegółach.