helyes mutat
Hogyan kell végrehajtani egy univerzális funkciókat és elrejtése a DOM-elem? Számos közös lehetőség, a különböző gereblye, amely azt fogja nézni, és válassza ki a legjobb.
Vegyünk egy nagyon egyszerű funkció kapcsoló:
Hátránya ennek a megközelítésnek könnyen belátható. Például linkek van alapértelmezett display: inline. És ezt a kódot kijelző = „blokk”.
Annak ellenőrzésére, - kattintson bármelyik helyen a sárga div. ebben az esetben ez lesz az úgynevezett kapcsoló linkek. És akkor - újabb kattintással újra váltani.
Mint látható, hogy elrejti rendesen, de a show - érvénytelen.
Hasonló probléma a sejtek a táblázat, ahol a standard kijelzés: table-cell.
Ez a probléma meg van fosztva a következő lehetőségek közül:
Ehelyett blokkolja display tulajdonság visszaáll - ugyanakkor megkapja a kijelző elem a CSS alapértelmezés, vagyis az, amelyik eredetileg:
Mint látható, minden megfelelően működik.
De ez felvet egy másik problémát. display tulajdonság egy elem eltérhet öröksége a CSS, például:
Ebben az esetben a nullázás kijelző különösen fontos.
A jobb alkalmazhatóság Minimum két részre osztani: mutatása és elrejtése, és a hibakeresést őket egyenként.
Ahhoz, hogy elkerüljük a fenti problémát felülírása kijelző - a rejtett elemeket rögzíti a régi értéket a kijelzőn el.displayOld attribútumot. és a show - a regenerálódásra.
Most a show / hide linkeket a megjelenített megfelelően fog működni.
Ez a változat azonban - nem több, mint egy köztes számunkra.
hide funkció működik. Körülbelül ez a show nem mondja.
- Először is, a kihívás megmutatni hide alaphelyzetbe a kijelző. Ez a viselkedés - helytelen, korrigálni kell.
- Másodszor, és ami még fontosabb, ha az elem nem látható, a CSS osztály, akkor mutasd meg nem jelenik.
Például, show nem fog megjelenni egy linket ezt a példát:
Hogy oldja meg ezt a problémát, azt mutatják, A funkció tudnia kell, hogy egy tétel valós-e vagy sem. Ez segít nekünk, hogy hozzáférést számított stílus - számított stílus elem, ahová a belépés tenni a különböző módon, attól függően, hogy a böngésző.
A következő függvény valós érték kijelző a számított stílus, akkor van. amelyet úgy kapunk, használata által a CSS-osztályok és tulajdonságok.
Ha az elem nem jelenik meg, mivel a CSS-osztály, getRealDisplay visszatér a „nincs” neki.
Érdemes lehet eltávolítani ezt a sort optimalizálása érdekében, hogy a show gyorsabban.
De ez a műsor nem fog megfelelően működni, ha hívják előzetes elrejtése elemet nem szabványos kijelzőn.Hol kap a kijelzett érték megjelenítéséhez először rejtett elem? Ez nem feltétlenül blokkolja. mert elem lehet hivatkozni táblázatcellákban, és általában - a „helyes” kijelző megjelenítéséhez elem függ az idő, hely és a hangulat a programozó.
A blokk (3.2), a funkció hozza az elem az ugyanazt a jelölés a végéig
és megkapja a kijelzőn. amely gyorsítótárazza a másodlagos objektumot displayCache. Természetesen ez csak egy tipp, de egyszerűbb esetekben működik.Ez a kijelző használnak ahhoz, hogy a tételt.
- Próbáld ki, hogy a megfelelő kijelzett érték a gyorsítótárból.
- A cache nem - hozzá egy üres címkét . ezt követően hozza meg kijelzőn.
- Ha a címke egy igazi display: none - nem hiszem. Vegye ki a blokk. mi mást tehetnék, akkor az elem megjelenik.
- kitalálta érték kijelző elem alkalmazni, és tárolja későbbi felhasználásra.
Szóval, most alapján a show, és elrejti, akkor lehet, hogy a függvény váltani. ami látható elem irha és láthatatlan - éppen ellenkezőleg, azt mutatja. Más szóval, ez megváltoztatja az elem.
Funkcióváltás maga nagyon egyszerű:
Mert az ő munkája szükséges kiegészítő funkció IsHidden. amely meghatározza, hogy az elem látható. Természetesen értjük igazán látni, nem az ingatlan kijelző elem.
Mi a trükk offsetWidth / offsetHeight:
Ez a megvalósítás próbál választ kapni, amennyire csak lehetséges, a check offsetWidth / offsetHeight. mert gyorsabb, mint getRealDisplay.
Szóval, itt van a végső kódot toggle.js.
Egy példa a munka látható egy külön oldalon.
Ez a sokoldalú funkció kapcsoló széles körben használják a különböző könyvtárak, különösen a jQuery.
Most már tudjuk, hogy ez teszi számos felesleges műveletek és ha hirtelen a kampós zaglyuchit - képzelni, hogy mi lehet ennek az oka.
Hagyd, hogy a kapcsoló mindig működik megfelelően!
- nyomtatható változat