Autor Zpráva
Wayne
Profil *
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
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 *
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
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 *
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
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0