Accentsconagua

Cum se construiește o componentă de acordeon cu CSS și o atingere a JavaScript

Web design
Share

În tutorialul de astăzi vom învăța cum să construim o componentă de afișare / ascundere cu CSS și un pic de JavaScript. Implicit, jQuery furnizează slideToggle care ne permite să creăm acordeoane cu o mișcare de alunecare. Provocarea noastră este să imităm această funcționalitate cu JavaScript pur.

Iată componenta pe care o vom crea:

Notă: aceasta este o funcționalitate nativă furnizată de

și elemente, deși acestea nu beneficiază încă de suport în browserele Microsoft. 

  • Explicarea elementelor "Detalii" și "Rezumat"

    O mulțime de biblioteci JavaScript sunt dezvoltate pentru a ne oferi widget-uri interactive interactive pe site-uri web. În același timp, HTML5 a interpretat și un număr ...
    Thoriq Firdaus
    HTML5

1. HTML-ul

Pentru început, definim un element cu clasa lui recipient care conține două subelemente:

  • butonul care ascunde și dezvăluie conținutul (inclusiv o pictogramă inline SVG)
  • conținutul real

Iata cum arata:

2. CSS

CSS este destul de simplă. Trebuie să definim două clase de ajutor (adică. ascunde și spectacol). 

Pentru a ascunde și a dezvălui elementul țintă, vom folosi înălţime proprietate, dar nu vom specifica valorile în CSS. În schimb, vom seta dinamic valorile înălțime prin JavaScript. 

Un lucru de observat este că nu folosim afişa proprietate pentru a comuta vizibilitatea conținutului nostru. Această proprietate nu se numără printre proprietățile CSS animabile.

Iată stilurile CSS corespunzătoare:

.ascundeți display: none; . afișați display: flex;  .info overflow: hidden; tranziție: înălțime .5s;

3. JavaScript-ul

Acum este momentul să discutăm cum ar trebui să funcționeze codul nostru JavaScript.

În primul rând, de îndată ce DOM este gata, obținem înălțimea .info element și apoi setați imediat valoarea lui la 0.

const info = document.querySelector (". info"); hai infoHeight = info.offsetHeight; info.style.height = 0;

Rețineți că, în funcție de conținutul dvs. (de exemplu, dacă include imagini), este posibil să trebuiască să includeți codul de mai sus în interiorul sarcină eveniment.

Apoi, atunci când .toggle-BTN este făcută clic pe butonul de mai jos:

  • Schimbați vizibilitatea .Mai puțin și .Mai Mult element.
  • Recalculați înălțimea .info element. Dacă este 0 (inițial îi dăm această valoare), înseamnă că conținutul este ascuns, așa că îl dezvăluim prin stabilirea înălțimii sale egale cu înălțimea inițială (stocată în infoHeight variabil). Pe de altă parte, dacă conținutul este vizibil, îl ascundem prin setarea înălțimii lui la 0.
  • Opțional, ne asigurăm că .toggle-BTN va fi făcută o singură apăsare până când animația de diapozitive se va termina (durează 500 ms). 

Iată codul care implementează întregul comportament:

const (toggle-btn); const info = document.querySelector (". info"); const mai mic = document.querySelector (". less"); const mai mult = document.querySelector ("mai mult"); // înălțimea inițială permite infoHeight = info.offsetHeight; toggleBtn.addEventListener ("click", functie () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("ascunde"); (infoNewHeight == 0) info.style.height = '$ infoHeight px'; altceva info.style.height = info.style.height = 0; setTimeout (() => this.disabled = false;, 500););

Resetați browserul

Următorul pas este să vă asigurați că componenta va funcționa corect deoarece fereastra browserului va fi redimensionată. 

Iată codul JS necesar:

// definiții variabile aici window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide" .style.height = '$ infoHeight px'; altceva info.style.height = 0;);

4. Suport pentru browsere

Demo-ul nostru ar trebui să funcționeze bine în toate browserele și dispozitivele recente. De asemenea, ca de obicei, folosim Babel pentru a compila codul ES6 până la ES5. 

Concluzie

În acest scurt tutorial am construit o componentă de prezentare / ascundere în stil acordeon cu CSS și JavaScript. Mulțumită animației înălţime , am reușit să adăugăm un element slide-in / slide-out componentei noastre. 

În mod special, nu am luat în considerare accesibilitatea, deci dacă doriți să vă îmbunătățiți funcționalitatea, cu siguranță ar putea fi următorul pas.

Mai multe tutoriale "Cu o atingere de JavaScript"


Web design
×