Autor | Zpráva | ||
---|---|---|---|
Wayne Profil * |
#1 · Zasláno: 21. 6. 2015, 23:57:58
Ahoj, řeším tu docela zapeklitý příklad je to tento kód
<ul class="normal"> <li>.........</li> <div class="toggle"> <div class="toggle-content"><li>Linux - základy</li><li>Responsive web design</li><li>Bootstrap - základy</li><li>XML - základy</li> <li>Javascript - základy</li></div><div class="toggle-header"><li> Více >></li></div> </div> </ul> Jistě asi vidíte, že je blbost aby ve značce <ul> byl div</ul>, ale popravdě vůbec netuším jak tuto situaci vyřešit aby funkčnost zůstala stejná, zároveň však aby stránky byly úspěšně z validovány. |
||
Chamurappi Profil |
#2 · Zasláno: 22. 6. 2015, 00:12:15
Reaguji na Wayne:
K čemu tam ten obal je? Musí tam být? Nemůže být třída přímo na jednotlivých <li> ? Zase tak zapeklité mi to nepřipadá.
„zároveň však aby stránky byly úspěšně z validovány“ A to bude k čemu? Pokud má tato konstrukce význam jen pro JS, proč ji nevyrobí sám JS? Tedy proč tam ten <div> nevyrábíš skriptem po načtení? Tím sice také vznikne nevalidní kód, ale mimo dosah validátoru. |
||
Wayne Profil * |
#3 · Zasláno: 22. 6. 2015, 00:19:41
Chamurappi:
Ten obal tam je z toho důvodu aby všechny položky co jsou v něm umístěné aby je skrýval a rozbaloval, jinak asi tím scriptem to bude nejlepší volba |
||
Chamurappi Profil |
#4 · Zasláno: 22. 6. 2015, 00:24:57
Reaguji na Wayne:
„aby všechny položky co jsou v něm umístěné aby je skrýval a rozbaloval“ Zatímco kdyby měly všechny skrývané položky nějakou třídu a skript by se upravil tak, aby skrýval a rozbaloval přímo je a ne <div> … tak by to bylo vyřešené bez čachrů s DOMem.
|
||
Wayne Profil * |
#5 · Zasláno: 22. 6. 2015, 00:39:17
Chamurappi:
Mohl by si se prosimtě podívat na můj script a říct co tam je teda špatně? var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || setTimeout; var previousElementSibling = function(el) { do { el = el.previousSibling; } while (el && el.nodeType !== 1); return el; }; var show = function(content) { content.style.display = "block"; content.setAttribute("data-open", "1"); }; var hide = function(content) { content.style.display = "none"; content.removeAttribute("data-open"); }; var toggle = function() { var content = previousElementSibling(this); if (content.getAttribute("data-open")) { hide(content); this.innerHTML = "<li>Více >></li>"; } else { show(content); this.innerHTML = "<li><< Méně</li>"; } }; var headers = document.querySelectorAll(".toggle-header"); for (var i = 0; i < headers.length; i++) { headers[i].onclick = toggle; } |
||
Chamurappi Profil |
#6 · Zasláno: 22. 6. 2015, 08:36:12
Reaguji na Wayne:
Já tomu tvému skriptu asi moc nerozumím. Co všechno má dělat? Atribut data-open nikde nemáš… a k čemu tam je ten raf ?
Kdybych to vyráběl já, dal bych na poslední <li> něco jako onclick="this.parentNode.className = this.parentNode.className ? '' : 'rozbaleno';" a zbytek bych řešil v HTML a ve stylech – aby při třídě rozbaleno byly vidět potomci, kteří mají být vidět.
|
||
snazimse Profil |
#7 · Zasláno: 22. 6. 2015, 08:58:11
Wayne:
„Ten obal tam je z toho důvodu aby všechny položky co jsou v něm umístěné aby je skrýval a rozbaloval“ Všechno je to zbytečně složité, ne? Stačilo by jednoduše, všem li položkám nastavit ekvivalentní třídu, proiterovat a nastavit na none v případě toggle. Řešení je více.
|
||
Časová prodleva: 9 let
|
0