În acest blog, am de gând să creez un acordeon folosind javascript nativ. Nu este necesară nicio bibliotecă precum jQuery. JQueryUI are o componentă acordeon încorporată, care este foarte bună de folosit. Dar, ca dezvoltator responsabil, ar trebui să știm, de asemenea, cum să creăm unul cu javascript pur. Dacă nu știți ce este un acordeon, atunci căutați unul jquery aici.
Să descompunem componenta în pași mai mici.
- Acordionul conține o listă de panouri.
- Care panou are două componente, header & body.
- Componenta antet a tuturor panourilor este întotdeauna vizibilă.
- Un panou poate fi extins sau colapsat.
- Când un panou este extins, componenta corp devine vizibilă.
- Doar un singur panou poate fi extins la un moment dat.
- Când un alt panou este extins, componenta de corp a ultimului panou se ascunde.
Să construim componenta cu pași mici.
Pasul 1 :- Proiectarea HTML de bază
Să creăm un html de bază care să creeze o listă de panouri cu antet & corp.
HTML de mai sus conține lista de panouri. Fiecare panou are elemente de antet și corp. În prezent, totul este vizibil.
Pasul 2 :- Definirea unor CSS pentru a gestiona vizibilitatea
Să creăm două clase CSS pentru a defini vizibilitatea corpului.
În mod implicit, dorim să ascundem corpul tuturor panourilor în funcție de cerințe. Acum trebuie să arătăm doar elementul extins la un moment dat. Vom adăuga clasa active în div-ul panoului pentru a face corpul vizibil.
Etapa 3 :- Utilizarea CSS în HTML
După adăugarea CSS în HTML-ul nostru, codul va fi
Acum tot corpul panoului este ascuns, cu excepția primului. Am creat componenta noastră de bază de acordeon. Trebuie să folosim niște javascript pentru a o face pe deplin funcțională.
Pasul 4 :- Adăugarea evenimentelor click
Vom adăuga evenimentul click pe fiecare panou, care va schimba vizibilitatea panoului.
JS Fiddle link aici
funcția initAccordion este definită pentru a inițializa componenta acordeon. Ea pune un eveniment de clic pe fiecare panou. Atunci când se face clic pe un panou, aceasta elimină clasa activă din panoul activ curent și o adaugă la noul panou. În mod implicit, primul panou devine activ. Putem face ca orice panou să fie activ în mod implicit, trecând elementul panel în funcția showPanel.
Am creat cu succes acordeonul nostru. Acesta este doar un model foarte elementar de acordeon, dar acoperă funcționalitatea principală.
Potem să-l facem mai fantezist prin adăugarea de stiluri css frumoase, animații și pictograme. De asemenea, îl putem face mai orientat spre performanță prin implementarea delegării evenimentelor &, punând în cache elementele active curente. Consultați blogul meu despre evenimente pentru a învăța despre evenimente în detaliu.
.