Javascript-Problem

[Gunnar Bittersmann]

@@Friedel

Stimmt, da könnte man wirklich einen Button nehmen. Alle anderen <li>, die keine <ul> enthalten, bekommen an der Stelle einen Link nach dem Schema <a href="./Pfad/Seite.php"><img src="Bild_x.gif" alt="" class="ex_bild"><img src="Bild_y.gif" alt="" class="listicon">Text</a>. Diese Links werden aber nicht durch ein Javascript erzeugt, sondern im Php generiert.

Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren?

Die Funktion ordnerlink() sieht so aus:

function ordnerlink(a) {
  if (document.getElementById(a).className=="zu") {
    document.getElementById(a).className="offen";
  } else {
    document.getElementById(a).className="zu";
  };
};

Es ist i.A. keine gute Idee, eine Klasse per className zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.

Dafür nimmt man besser die Methoden der classList-Eigenschaft: add(), remove() – und kucke mal – da gibt’s auch toggle(). Da mit sähe deine Funktion so aus:

function ordnerlink(a) {
	document.getElementById(a).class('offen');
}

d.h. eigentlich brauchst du den Einzeiler gar nicht extra in einer Funktion zu kapseln.

Eine Klasse „zu“ brauchst du auch nicht; die Abwesenheit der Klasse „offen“ gibt den Zustand „zu“ an. (Oder andersrum: die Abwesenheit der Klasse „zu“ gibt den Zustand „offen“ an; dann brauchst du keine Klasse „offen“.)

Doch eine Klasse „offen“ (bzw. „zu“) brauchst du auch nicht – der Zustand sollte nämlich schon beim Button vermerkt sein: in dessen aria-expanded-Attribut, siehe Inclusive components: Toggle Buttons; s.a. Menus & Menu Buttons.

Die Listen blendet man über den Geschwisterselektor aus:

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

So in der Art ist es auch bei diesem resonsiven Menü auf schmalen Viewports zu sehen.

LLAP 🖖