Accentsconagua
Share
Nel tutorial di oggi impareremo come costruire un componente show / hide con i CSS e un po 'di JavaScript. Per impostazione predefinita, jQuery fornisce il slideToggle metodo che ci permette di creare fisarmoniche con un movimento scorrevole. La nostra sfida è imitare questa funzionalità con puro JavaScript.
Ecco il componente che creeremo:
Nota: questa è la funzionalità fornita nativamente dal
Per cominciare, definiamo un elemento con la classe di contenitore che contiene due sotto-elementi:
Ecco come appare:
Il CSS è piuttosto semplice. Dobbiamo definire due classi di supporto (ad es. nascondere e mostrare).
Per nascondere e rivelare l'elemento target, useremo il altezza proprietà, ma non specificheremo i suoi valori in CSS. Invece, imposteremo in modo dinamico i valori di altezza tramite JavaScript.
Una cosa da notare è che non usiamo il display proprietà per attivare la visibilità dei nostri contenuti. Quella proprietà non si considera tra le proprietà CSS animabili.
Ecco gli stili CSS corrispondenti:
.hide display: none; .show display: flex; .info overflow: nascosto; transizione: altezza .5s;
Ora è il momento di discutere su come dovrebbe funzionare il nostro codice JavaScript.
Innanzitutto, non appena il DOM è pronto, otteniamo l'altezza del .Informazioni elemento e quindi imposta immediatamente il suo valore su 0.
const info = document.querySelector (". info"); let infoHeight = info.offsetHeight; info.style.height = 0; Tieni presente che, a seconda del contenuto (ad esempio se include immagini) potresti dover includere il codice sopra all'interno di caricare evento.
Successivamente, quando il .alternare-btn viene cliccato il pulsante facciamo quanto segue:
.Di meno e .Di Più elementi..Informazioni elemento. Se è 0 (inizialmente diamo questo valore), significa che il contenuto è nascosto, quindi lo riveliamo impostando la sua altezza uguale alla sua altezza iniziale (memorizzato nel infoHeight variabile). D'altra parte se il contenuto è visibile, lo nascondiamo impostandone l'altezza a 0..alternare-btn verrà cliccato solo una volta fino a quando l'animazione della diapositiva non termina (dura 500 ms). Ecco il codice che implementa tutto questo comportamento:
const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const less = document.querySelector (". less"); const più = document.querySelector (". more"); // altezza iniziale lascia infoHeight = info.offsetHeight; toggleBtn.addEventListener ("click", function () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") ; less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; if (infoNewHeight == 0) info.style.height = '$ infoHeight px'; else info.style.height = 0; setTimeout (() => this.disabled = false;, 500););Il passaggio successivo consiste nel garantire che il componente funzioni correttamente mentre la finestra del browser viene ridimensionata.
Ecco il codice JS necessario:
// definizioni delle variabili qui window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide")) info .style.height = '$ infoHeight px'; else info.style.height = 0;);La nostra demo dovrebbe funzionare bene in tutti i browser e dispositivi recenti. Inoltre, come al solito, usiamo Babel per compilare il codice ES6 fino a ES5.
In questo breve tutorial abbiamo creato un componente show / hide in stile fisarmonica con CSS e JavaScript. Grazie all'animabile altezza proprietà, siamo riusciti ad aggiungere un effetto slide-in / slide-out al nostro componente.
In particolare, non abbiamo considerato l'accessibilità, quindi se si desidera migliorare la sua funzionalità che sicuramente potrebbe essere il prossimo passo.
