Cookies (~ Keks oder Plätzchen / Datenpaket) erleichtern die Bereitstellung der Inhalte dieser Website und ganz ehrlich! - Sie helfen auch dabei die Seite funktionaler und schöner zu machen. Mit der weiteren Nutzung dieser Website erklärst Du Dich damit einverstanden, dass die Seite einige wenige Cookies verwendet. Datenschutzerklärung Fenster schließen

websitewerker.de kassel

17. September 2019 - von Jens in Webentwicklung
JQuery – Toggle Status abfragen Visible & Hidden Selector

Wir wollen ein mobiles Menü, welches je nach Status eine andere Symbolik einblendet. Zum Beispiel soll es in geschlossenem Zustand das klassische Hamburger Icon angezeigt werden um auf ein vorhandenes Menü aufmerksam zu machen. In geöffnetem Zustand soll jedoch das „close“ Symbol angezeigt werden.

Das lässt sich einfach realisieren, indem man dem Symbol eine kleine JavaScript Funktion hinterlegt. Diese kann bspw. als Link angesprochen werden. Umschlossen wird das Symbol mit einem DIV mit der ID #hamburger, welches dann über die Funktion angesprochen werden kann und wo der darinliegende HTML Code mit via JQuery ausgetauscht wird.

Mehr ist es nicht …

Die Verlinkung auf die JS Funktion:

Die aufgerufene Funktion:

Mehr dazu (JQuery API):

Genutzte Icons (Material Design):


Diese Seite unterstützen?

Wenn dir dieser Beitrag geholfen hat, würde ich mich über ein kleines Dankeschön freuen.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Vielen Dank an Wordpress für diese hammermäßige Software!