beatovich: Sandwich Menue erweitert mit Submenues

Beitrag lesen

hallo

Danke für Deine Antwort, die mir nur bedingt hilft. Zumindest hat es mich auf einen Gedanken gebracht, dahingehend das ich bei "ARIA true" die ID ="item" freischalte / on-schalte. Lieber nenne ich item nun toggle-on oder sowas und muss es per script "freischalten". Ist das der richtige weg?

Persönlich finde ich das JS Schrott, das heisst nur für isolierte Demos geeignet.

Erst mal ist es in einem Dokument eine wiederkehrende Aufgabe ein Element mit aria-expanded attribut zu manipulieren.

Zweitens gibt es zahlreiche andere Funktionen, die simples Click-handling brauchen.

Deshalb erzeugen wir einen globalen Click-Manager

document.body.addEventListener("click", globalClickManager );

Dann schreiben wir den ClickManager

function globalClickManager(ev){
  // ev.target gibt uns das Element auf dem der Click geschah.

  // steuere expanded Buttons
	if(ev.target.hasAttribute("aria-expanded") ){
		ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); 
	}
  // Buttons die lediglich den Click transferieren ähnlich zu label Elementen
	else if(ev.target.hasAttribute("data-for-id") ){
		document.getElementById( ev.target.getAttribute("data-for-id") ).click();
	}
}

Alles was wir nun noch im Dokument schreiben müssen (egal wo, egal wie oft) ist

<button id="someid" aria-expanded="true">Buttonlabel</button>
<div>
  any Content
  <button data-for-id="someid">Sekundärer Schliess-Button</button>
</div>

und das CSS ist simpel

[aria-expanded="false"] + * {display:none}