Javascript-Problem
bearbeitet von 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:
> ~~~js
> 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`{:.language-js} zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.
Dafür nimmt man besser die Methoden der [`classList`{:.language-js}-Eigenschaft](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList): `add()`{:.language-js}, `remove()`{:.language-js} – und kucke mal – da gibt’s auch `toggle()`{:.language-js}. Da mit sähe deine Funktion so aus:
~~~js
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.
Und eine Klasse „offen“ brauchst du auch nicht – der Zustand sollte nämlich schon *beim Button* vermerkt sein: in dessen `aria-expanded`-Attribut, siehe *Inclusive components*{:@en}: [Toggle Buttons](https://inclusive-components.design/toggle-button/){:@en}; s.a. [Menus & Menu Buttons](https://inclusive-components.design/menus-menu-buttons/){:@en}.
Die Listen blendet man über den Geschwisterselektor aus:
~~~css
button[aria-expanded="false"] + ul { display: none }
~~~
So in der Art ist es auch bei diesem [resonsiven Menü](https://codepen.io/gunnarbittersmann/pen/NvKBjp) auf schmalen Viewports zu sehen.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)