beatovich: Experiment details/summary

Beitrag lesen

hallo

Aber Du hast recht, detail wird auch funktionieren, weil die Registrierung mit einer forEach Schleife erfolgt und daher eine Closure existiert. Ich persönlich vermeide allerdings die Nutzung von Closure-Daten, wenn es sich irgendwie vermeiden lässt.

Bin voll bei dir.

Ich habe jetzt etwas refactoriert. Das aktuell funktionierende Script:

function detailsInit(){
	document.body.classList.remove("noscript");
	document.querySelectorAll("details").forEach( function(detail){
		detail.querySelector("summary").setAttribute("aria-expanded","false");
		detail.querySelector("summary").setAttribute("role","button");
		detail.addEventListener( "click", detailsInitSub );
	});
}

function detailsInitSub(ev){
	if( ev.target.nodeName !== "SUMMARY") return;
	ev.stopPropagation();
	let thisEl=this;
	thisEl.querySelector("summary").setAttribute("aria-expanded","true");
	this.parentElement.querySelectorAll("details").forEach( function(item){
		if(item === thisEl){
			if( item.open == ""){
				item.removeAttribute("open");
				item.querySelector("summary").setAttribute("aria-expanded","true");
			}
			else{
				item.querySelector("summary").setAttribute("aria-expanded","false");
			}
		}
		else{
			item.removeAttribute("open");
			item.querySelector("summary").setAttribute("aria-expanded","false");
		}
	} );
}
document.addEventListener('DOMContentLoaded', detailsInit, false);

--
Neu im Forum! Signaturen kann man ausblenden!