Klasse entfernen bei Klick auf Toggle

lulu68163

Grünschnabel
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:
Relevantes HTML:

Der Toggle als Burger

<a href="#offcanvas" id="at-navbar" class="uk-hidden-large uk-navbar-toggle uk-float-right" data-uk-offcanvas></a>

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
 
Zuletzt bearbeitet:
Zurück