| Autor | Zpráva | ||
|---|---|---|---|
| simeon Profil |
jsbin.com/vihidebude/edit?html,css,js,output
Snažím sa vytvoriť navigáciu podobnú, aká je napríklad na Googli - teda, že pri kliknutí sa štvorček sa navigácia rozbalí a zmizne len pri kliknutí mimo novo zobrazenej navigácie, zatiaľ čo všetky odkazy na pôvodnej stránke sú klikateľné a kurzor myši sa pri prechode ponad text mení na textový (tzn. stránka nie je potiahnutá nejakým divom ako v mojej ukážke verzia 2). Viete mi poradiť, ako na to? Je to zrozumiteľné, o čo sa snažím? |
||
| simeon Profil |
#2 · Zasláno: 30. 3. 2016, 21:11:09
Tak nakoniec som to vyriešil. Narazil som na www.w3schools.com/howto/howto_js_dropdown.asp. Tu som upravil tú druhú JS funkciu na
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.matches('.dropdown-content') && !event.target.matches('.dropdown-content a')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
} |
||
| Chamurappi Profil |
#3 · Zasláno: 30. 3. 2016, 21:40:18
Reaguji na simeona:
„Tak nakoniec som to vyriešil.“ Tvůj skript nefunguje ve starších prohlížečích. Myslím, že by na celé zadání mělo stačit jedno přepínání třídy (tedy className, ne hůř podporovaný classList), zbytek bych nechal v režii CSS.
|
||
| simeon Profil |
#4 · Zasláno: 30. 3. 2016, 21:48:03
Chamurappi:
Dobre, ak je classList na tom zle s podporou, ako je na tom target.matches? Ten je pre to, čo chcem urobiť, kľúčový. |
||
| Kubo2 Profil |
#5 · Zasláno: 31. 3. 2016, 06:38:31
Metóda
Element.matches() resp. Element.matchesSelector() je podporovaná približne nasledovne (podľa MDN): developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility
|
||
| Chamurappi Profil |
#6 · Zasláno: 31. 3. 2016, 11:28:57
Reaguji na simeona:
„ako je na tom target.matches?“ Tuto metodu nepodporuje ani Explorer 11. Takže je to celé nepoužitelné. Webu W3Schools se doporučuji vyhýbat, jeho autor je nebezpečně nekompetentní. „Ten je pre to, čo chcem urobiť, kľúčový.“ Ani moc není. Zjistit, zda je target.className rovno nějaké hodnotě, je snadné.
Krom toho si skutečně myslím, že by stačil jeden onclick na společném rodiči tlačítka, který by přepínal třídu, pokud (event.target || event.srcElement) == this, při čemž při nastavení třídy by z elementu vylezl fixovaný :after, který překryje zbytek plochy (tím pádem kliky na tento zbytek jsou pořád kliky na ten element).
|
||
|
Časová prodleva: 8 let
|
|||
0