Klasse entfernen bei Klick auf Toggle

  • Hallo,


    ich habe ein Problem mit der mobilen Navigation auf folgendem Joomla CMS www.palotravel.de


    Ich habe einen Burger mittels CSS erstellt, der beim Öffnen des Menüs zu einem X wird. Leider bekomme ich es nicht hin, dass bei Klick auf das X die Navigation schließt. Ich habe bereits einige Wege ausprobiert, aber irgendwie will keiner tun, was er soll...


    Anmerkung: Später soll bei Klick auf die Menüpunkte "Reiseziele" und "Rundreisen" eine "tiefere Ebene" angezeigt werden und das X zu einem Pfeil werden. Bei Klick auf den Pfeil kommt man wieder auf die obere Ebene des Menüs und der Pfeil wird wieder zum X.


    Ich hoffe ihr könnt mir helfen. Ich danke im voraus!


    Anbei noch Quellcode:




    Code
    Der Toggle als X <a href="#offcanvas" id="at-navbar" class="uk-hidden-large uk-navbar-toggle uk-float-right is-active" data-uk-offcanvas></a> Das Menü geschlossen <div id="offcanvas" class="uk-offcanvas">   <div class="uk-offcanvas-bar">      <div class="module deepest">          Menüpunkte     </div>   </div></div> Das Menü offen <div id="offcanvas" class="uk-offcanvas uk-active">   <div class="uk-offcanvas-bar uk-offcanvas-bar-show">      <div class="module deepest">          Menüpunkte     </div>   </div></div> Javascript, das ich verfasst habe zum Tranformieren zu einem X (function() {     "use strict";     var toggles = document.querySelectorAll(".uk-navbar-toggle");     for (var i = toggles.length - 1; i >= 0; i--) {      var toggle = toggles[i];      toggleHandler(toggle);    };     function toggleHandler(toggle) {      toggle.addEventListener( "click", function(e) {        e.preventDefault();        (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");      });    } Das Javascript, das nicht funktioniert hatte, lasse ich jetzt einfach mal raus. Das hier funktioniert wunderbar
  • ich würde mich freuen, wenn du deinen Quellcode sinnvoll in HTML, CSS und javscript unterteilst.
    Dann kann man den Code leichter kopieren und testen.


    Momentan funktioniert dein Code bei mir nämlich nicht.
    Dein Javscript fängt mit einer Funktion an, die weder einen Namen hat noch irgendwo aufgerufen wird.


    Dem entsprechend wird das Javascript nirgendwo verwenden und dadurch passiert auch im Menü nichts.

  • Killerbear:
    Das oben gezeigte Script ist völlig korrekt. Es wird eine automatisch anonyme Funktion verwendet um die Ausführung des Scripts zu erzwingen und einen Namensraum zu schaffen. Es handelt sich dabei nicht unbedingt um eine Technik die Anfängern beigebracht wird und so wie sie hier verwendet wird, fehlt auch der Sinn dahinter.


    lulu68163:
    Damit wir nachvollziehen können was passieren soll und was passiert brauchen wir vollständigen Code (das betrifft HTML, CSS und Javascript) oder im besten Fall einen Link zu deiner Seite (wenn vorhanden) wo wir uns die Geschichte angucken können.


    Im Moment klingt alles irgendwie nach "Ich habe ein Pferd und möchte mit dem Apfel den Baum fällen."

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!