onclick funktionen

[newTML]

Hallo zusammen,

Ich wurde nach längerem suchen im Web nicht fündig oder bekomm es einfach nicht hin. Bemerkung am Rande bin auch neu in der ganzen Sache :)

Nun zu meiner Frage, ich hab ne "<a onclik=open" Funktion die mir ne Seiten-Navigation öffnet und ne andere "<a onclick=close" Funktion die sie wieder schliesst. Nun wär kuhl wenn ich das in einer Funktion machen könnte resp. drauf klicke öffnet sich die Nav. und wieder klicken schliesst sich die Nav. wieder.

Wie bekomm ich das am besten hin?

Schon mal big thanks im Voraus!

[Christian Wansart]

Guten Abend,

du musst dir den aktuellen Zustand abspeichern und kannst dann entsprechend die Aktion ausführen. Zum Beispiel:

var navigationOffen = false;
function navigationToggle() {
    if(navigationOffen) {
        // Code zum Schließen der Navigation.
    } else {
        // Code zum Öffnen der Navigation.
    }
    navigationOffen != navigationOffen;
}

Eine kleine Bitte noch: wenn du Probleme und Fragen hast, und du hast bereits existierenden Code, wäre es hilfreich, wenn du diesen ebenfalls zeigst. ;-)

Freundliche Grüße
Christian

[Gunnar Bittersmann]

@@Christian Wansart

du musst dir den aktuellen Zustand abspeichern

Diese Information sollte im DOM vorhanden sein: im hidden-Attribut des entsprechenden Elements (nav).

var navigationOffen = false;

Dann braucht man dieses Flag nicht, sondern man fragt das Vorhandensein des hidden-Attributs ab.

Noch „kuhler“ ist natürlich, das hidden-Attribut nicht initial ins HTML zu schreiben, sondern erst mit JavaScript zu setzen – dann wird die Navigation nur versteckt, wenn JavaScript ausgeführt wird, und funktioniert damit auch ohne JavaScript.

Dafür wird der Button initial versteckt und erst mit JavaScript sichtbar gemacht. Außerdem bekommt er ein aria-expanded-Attribut, dessen Wert ebenfalls mit dem Öffnen/Schließen des Menüs umgeschaltet wird:

<button id="menu-toggler" hidden="hidden">Menü öffnen/schließen</button>
<nav id="main-nav">
  ⋮
</nav>

var menuTogglerElement = document.querySelector('#menu-toggler');
var mainNavElement = document.querySelector('#main-nav');

menuTogglerElement.removeAttribute('hidden');
menuTogglerElement.addEventListener('click', toggleMenu);

toggleMenu();

function toggleMenu()
{
  if (mainNavElement.hasAttribute('hidden'))
  {
    mainNavElement.removeAttribute('hidden');
    menuTogglerElement.setAttribute('aria-expanded', 'true');
  }
  else
  {
    mainNavElement.setAttribute('hidden', true);
    menuTogglerElement.setAttribute('aria-expanded', 'false');
  }
}

Siehe Léonie Watsons Toggletip design pattern.

Was man noch machen könnte: Den Button nicht mit „öffnen/schließen“ beschriften, sondern die Beschriftung je nach Zustand zwischen „Menü öffnen“ und „Menü schließen“ wechseln lassen.

LLAP 🖖

[Siegfried]

Diese Information sollte im DOM vorhanden sein: im hidden-Attribut des entsprechenden Elements (nav).

Darüber würden JS-Programmierer streiten ... seit Jahren geht der Trend dahin das DOM nicht als "Source of Truth" zu betrachten.

DASS die Info ins DOM geschrieben werden muss ist unerlässlich. Ob das nun eine Klasse oder "hidden" ist, macht derzeit keinen großen Unterschied. Denn eine Angabe "[hidden] { display: none }" braucht es derzeit noch.

Dafür wird der Button initial versteckt und erst mit JavaScript sichtbar gemacht. Außerdem bekommt er ein aria-expanded-Attribut, dessen Wert ebenfalls mit dem Öffnen/Schließen des Menüs umgeschaltet wird:

Soweit ich weiss ist dann auch aria-controls sinnvoll:

https://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/

https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded

Siegfried

[Christian Wansart]

Guten Morgen Siegfried,

allerdings hat diese Lösung den Vorteil, dass das HTML ebenfalls darüber Bescheid weiß, also alles Abhängige ebenfalls, so wie ARIA oder aber CSS.

Ich mein, man kann auch Elemente mit JS verschieben optisch verschieben oder ausblenden, aber ob das sinnvoll ist, kann man sich dann auch fragen.

Freundliche Grüße
Christian

[Gunnar Bittersmann]

@@Christian Wansart

Darüber würden JS-Programmierer streiten ... seit Jahren geht der Trend dahin das DOM nicht als "Source of Truth" zu betrachten.

allerdings hat diese Lösung den Vorteil, dass das HTML ebenfalls darüber Bescheid weiß, also alles Abhängige ebenfalls, so wie ARIA oder aber CSS.

Das Eine schließt ja das Andere nicht aus.

Die Abfrage einer booleschen Variablen in JavaScript ist sicher auch ein My (was hier durchaus als Mikrosekunde gelesen werden kann) schneller als das Raussuchen des Werts aus dem DOM (selbst wenn man die Referenz aufs Elementobjekt schon in einer Variablen hat).

Ich mein, man kann auch Elemente mit JS verschieben optisch verschieben oder ausblenden, aber ob das sinnvoll ist, kann man sich dann auch fragen.

Das sollte man sich fragen. Idealerweise, bevor man dies in Erwägung zieht.

Nur das viele das nicht tun.

Wie Heydon spottet:
“My javascript is shit -> I should learn more javascript
My CSS is shit -> I'll do it with javascript”

LLAP 🖖

[Gunnar Bittersmann]

@@Siegfried

Ob das nun eine Klasse oder "hidden" ist, macht derzeit keinen großen Unterschied.

Oh doch. Eine Klasse hat keine Bedeutung.

Es bedarf einer zusätzlichen Technik (CSS), damit sie Wirkung zeigt. Wenn das Stylesheet aus irgendeinem Grund nicht geladen wird, werden Elemente mit einer Klasse "hidden" doch angezeigt (bzw. von AT wiedergegeben); Elemente mit dem hidden-Attribut hingegen nicht^[1].

LLAP 🖖

---

1. außer in steinzeitlichen Browsern ↩︎

[Siegfried]

Ob das nun eine Klasse oder "hidden" ist, macht derzeit keinen großen Unterschied.

Oh doch. Eine Klasse hat keine Bedeutung.

Es bedarf einer zusätzlichen Technik (CSS), damit sie Wirkung zeigt.

Hast du mein Posting aufmerksam gelesen? Dort schrob ich das das auch noch auf das hidden Attribut zutrifft:

'' Denn eine Angabe "[hidden] { display: none }" braucht es derzeit noch. ''

Wenn das Stylesheet aus irgendeinem Grund nicht geladen wird, werden Elemente mit einer Klasse "hidden" doch angezeigt (bzw. von AT wiedergegeben); Elemente mit dem hidden-Attribut hingegen nicht(1).

(1): außer in steinzeitlichen Browsern

IE kleiner v11 sehe ich nicht als steinzeitlich an.

http://caniuse.com/#feat=hidden

Sagt dir das Wort "Dippelschisser" etwas?

Siegfried

[Gunnar Bittersmann]

@@Siegfried

'' Denn eine Angabe "[hidden] { display: none }" braucht es derzeit noch. ''

http://caniuse.com/#feat=hidden

Global 96.2%

Das heißt, in so gut wie allen Browsern funktioniert das Ausblenden per hidden-Attribut auch ohne CSS.

Ich hab auch nicht gesagt, dass man nicht für die letzten paar Prozent [hidden] { display: none } ins Stylesheet schreiben sollte.

Ich hab gesagt, dass man primär die für diesen Zweck am besten geeignete Technik verwenden sollte. Und das ist das HTML-Attribut hidden.

Sagt dir das Wort "Dippelschisser" etwas?

Magst du’s mir erklären?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hab gesagt, dass man primär die für diesen Zweck am besten geeignete Technik verwenden sollte. Und das ist das HTML-Attribut hidden.

In welchem Marcy Sutton verschiedene Techniken vergleicht:

• display: none
• hidden-Attribut
• opacity: 0
• visibility: hidden
• Klasse visuallyhidden wie in H5BP
• aria-hidden="true"

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (Video, 12:25)

LLAP 🖖

[Christian Wansart]

Guten Morgen Gunnar,

das ist natürlich die bessere Lösung. ;-) Vergib mir, ich war müde und habe zu viel BEM-Code gelesen, da kann man schnell mal durcheinander kommen. 🤔

Lebe lang und in Frieden.

[Gunnar Bittersmann]

Nun zu meiner Frage, ich hab ne "<a onclik=open" Funktion die mir ne Seiten-Navigation öffnet und ne andere "<a onclick=close" Funktion die sie wieder schliesst.

a ist das falsche Element für den Öffnen/Schließen-Button. Es sollte ein button sein.

Statt onclick im HTML zu notieren registrierst du den Eventhandler besser mit addEventListener() in JavaScript:

<button id="menu-toggler">Menü öffnen/schließen</button>

var menuTogglerElement = document.querySelector('#menu-toggler');

menuTogglerElement.addEventListener('click', toggleMenu);

function toggleMenu()
{
// …
}

LLAP 🖖

[newTML]

Hallo und Danke vielmals Euch allen!!

Hab leiber momentan nicht viel Zeit und bin Weg aber werde mich am Weekend dahinter setzen und schuen welches die beste Lösung ist :)

Aber möchte mich herzlich bei euch bedanken für die Antworten! Werde mich wieder melden.

Grüsse