Sprachauswahl-Menü funktioniert nicht richtig

[Rolf B]

Hallo,

angesichts des let stellt sich die Frage nach Internet Explorer 11 nicht - aber wenn's dort nicht unbedienbar sein soll, muss es var sein und man braucht einen Polyfill für Nodelist.foreach.

Eleganter geht's, wenn man Event Bubbling verwendet und das click-Event auf einem gemeinsamen Container der beiden Menüs abhandelt (z.B. auf dem Body-Element). Die IDs der beiden Sprachwähler sind dann durch eine class zu ersetzen, die bei beiden gleich ist. Zum Beispiel lang-menu. Die Frage, welcher von beiden sichtbar ist, löst man vermutlich sowieso über CSS-Selektoren die den Container des oberen oder unteren Sprachwählers beinhalten, d.h. eine eindeutige ID für die beiden Wähler dürfte unnötig sein.

Allerdings braucht auch diese Variante einen IE11-Polyfill, nämlich für Element.closest. Oder man verwendet die darunter stehende Variante.

Was NICHT funktioniert, ist die triviale Prüfung ob e.target ein Button ist. Grund ist der andauernde Streit zwischen Chrome und Firefox, ob Kindelemente innerhalb eines Buttons Event-Targets sein können oder nicht. Klickt man auf das SVG, liefert FF den Button als Target und Chrome den Path. Deswegen die Suche in den Elternelementen.

document.body.addEventListener('click', function(e) {
   // Sprachmenü-Div finden, wenn null, dann war der click woanders -> raus
   let chooser = e.target.closest(".lang-menu");
   if (!chooser) return;
   
   // Button im Sprachmenü finden, wenn null, ist das Menü falsch -> raus
   let button = chooser.querySelector("button");
   if (!button) return;
   
   // aria-expanded Attribut des Button umschalten und das daneben
   // liegende Dropdown-Menü entsprechend ein- oder ausblenden.
   let expanded = button.getAttribute('aria-expanded') === 'true' || false;
   button.setAttribute('aria-expanded', !expanded);
	 let menu = button.nextElementSibling;
   menu.hidden = !menu.hidden;
});

IE10/11 kompatible Version der beiden ersten Zeilen:

   // Sprachmenü-Div finden, wenn null, dann war der click woanders -> raus
   var chooser = e.target;
   while (chooser && !cho0ser.classList.contains("lang-menu") )
      chooser = chooser.parentElement;
   if (!chooser)
     return;

Rolf