Cum să pună în aplicare o funcții universale afișa și ascunde elementul DOM? Există mai multe opțiuni comune, cu o varietate de grebla, pe care ne vom uita la și alege cele mai bune.
Luați în considerare un mod foarte simplu de comutare funcția:
Dezavantajele acestei abordări este ușor de văzut. De exemplu, link-uri au afișare implicit: inline. Și a pus acest ecran cod = „bloc“.
Pentru a verifica - click pe orice loc al div galben. în acest caz, acesta va fi numit de comutare link-uri. Și apoi - clic din nou pentru a re-comutare.
După cum puteți vedea, se ascunde în mod normal, dar show - invalid.
O problemă similară este cu celulele din tabel, în care, la standard de afisare: table-celulă.
Această problemă este lipsit de următoarele opțiuni:
În schimb blocul de proprietate de afișare este resetat - în același timp, primește elementul de afișare al CSS implicit, adică, cel care a fost inițial:
După cum puteți vedea, totul funcționează corect.
Dar acest lucru ridică o altă problemă. afișa proprietatea unui element poate diferi de moștenirea CSS, de exemplu:
În acest caz, afișare de resetare la zero este de o importanță deosebită.
Pentru o mai bună aplicabilitate de comutare se împarte în două părți: spectacol și să se ascundă, și să le depana în mod individual.
Pentru a evita problema de mai sus, cu suprascrierea ecran - cu elementele ascunse vor înregistra vechea valoare în atributul de afișare el.displayOld. iar la spectacol - pentru a recupera.
Acum arată / ascunde link-uri cu afișajul va funcționa corect.
Cu toate acestea, această variantă - nu mai mult de un intermediar pentru noi.
funcția de ascundere funcționează bine. Despre acest spectacol nu spune.
- În primul rând, provocarea de a afișa ascunde reseta afișajul. Acest comportament - în mod incorect, acesta trebuie să fie corectată.
- În al doilea rând, și mai important, în cazul în care elementul este ascuns, clasa CSS, apoi arată că nu se va arăta.
De exemplu, spectacol nu se va afișa un link din acest exemplu:
Pentru a rezolva această problemă, arată Pentru funcția trebuie să știe dacă un element este real sau nu este afișată. Acest lucru ne va ajuta pentru a face accesul la stilul calculat - calculat element de stil, la care accesul se face în diferite moduri, în funcție de browser.
Funcția următoare are o valoare reală de afișare a stilului Computerizata, atunci există. care se obține prin utilizarea de CSS-clase și proprietăți.
Dacă elementul nu este afișat datorită CSS-clasa, getRealDisplay se întoarce „nici unul“ pentru el.
Este posibil să doriți să eliminați această linie, în scopul de a optimiza, pentru a face spectacol mai repede.
Dar acest spectacol nu va funcționa corect atunci când este solicitat, fără a ascunde în prealabil un element cu afișaj non-standard.În cazul în care pentru a obține valoarea de afișare pentru a afișa elementul inițial ascunse? Ea nu blochează în mod necesar. deoarece elementul ar putea fi o referință, celulele de masă, și, în general, - pe display „dreapta“ pentru a afișa elementul depinde de timp, locul și starea de spirit programator.
In blocul (3.2), funcția pune elementul cu aceeași etichetă până la capăt
și primește afișajul său. care cache în displayCache obiect secundar. Desigur, aceasta este doar o presupunere, dar în cazuri simple, funcționează.Acest ecran este folosit pentru a atribui elementul.
- Încercați pentru a obține valoarea de afișare corectă din cache.
- Memoria cache nu este - adăugați o etichetă gol pentru a . apoi să ia de afișare lui.
- În cazul în care tag-ul are un ecran real: nici unul - nu a reușit să ghicească. Ia blocul. ce altceva de făcut, atunci este afișat elementul.
- ghicit element de afișare valoare pentru a aplica și de a stoca pentru o utilizare viitoare.
Deci, acum bazat pe spectacol și ascunde, puteți face funcția de comutare. care este un element de piei vizibile și invizibile - dimpotrivă, spectacole. Cu alte cuvinte, se schimbă starea elementului.
Funcția de comutare în sine este foarte simplu:
Pentru funcția auxiliară ei de lucru necesar Este ascuns. care determină dacă elementul este vizibil. Desigur, ne referim la vedea cu adevărat, nu elementul de afișare de proprietate.
Noi folosim truc offsetWidth / offsetHeight:
Această implementare este încercarea de a obține un răspuns, în măsura în care este posibil, folosind check offsetWidth / offsetHeight. deoarece este mai rapid decât getRealDisplay.
Deci, aici este final toggle.js cod.
Un exemplu de munca pe care o puteți vedea pe o pagină separată.
Această caracteristică de comutare versatil este utilizat pe scară largă în diferite biblioteci, în special în jQuery.
Acum știi că face o serie de operațiuni care nu sunt necesare, iar în cazul în care dintr-o dată de comutare zaglyuchit dvs. - imaginați-vă ce ar putea fi cauza.
Să toggle dvs. meargă întotdeauna așa cum!
- versiune printabilă