Umschaltklasse des übergeordneten Elements onclick ohne jQuery

Question

Ich versuche, die Klasse eines übergeordneten li-Elements umzuschalten, wenn das sub-ul-Element aktiv ist. Ich weiß, wie man es in jQuery macht, aber das Ziel bei diesem Projekt ist, sich nicht auf Bibliotheken wie Bootstrap oder jQuery zu verlassen.

Ich habe eine Demo auf CodePen: https://codepen.io/mikejandreau/pen/eRvOBQ

Es gibt auch eine Entwickler-Website das gleiche Menü hier mit: http://losaidos.com/dev/baseinstall/.

Dies ist die JavaScript-Steuerung derzeit das Untermenü schaltet:

// Add toggles to menu items that have submenus and bind to click event 
var subMenuItems = document.body.querySelectorAll('.page_item_has_children > a'); 
var index = 0; 
for (index = 0; index < subMenuItems.length; index++) { 
    var dropdownArrow = document.createElement('span'); 
    dropdownArrow.className = 'sub-nav-toggle'; 
    dropdownArrow.innerHTML = 'More'; 
    subMenuItems[index].parentNode.insertBefore(dropdownArrow, subMenuItems[index].nextSibling); 
} 

// Enables toggling all submenus individually 
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle');  
for(var i in subMenuToggle) { 
    if(subMenuToggle.hasOwnProperty(i)) { 
    subMenuToggle[i].onclick = function() { 
     this.parentElement.querySelector('.children').classList.toggle("active"); 
     this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active"); 
    }; 
    } 
} 

Ich habe versucht, die Logik zu duplizieren, indem Sie diesen in die subMenuToggle[i].onclick Funktion:

this.parentElement.querySelector('.page_item_has_children a').classList.toggle("active"); 

aber kein Glück so weit in immer es funktioniert. Ich habe das Gefühl, dass ich nah bin, aber etwas Offensichtliches vermisse.

Alle Hinweise würden sehr geschätzt werden - danke im Voraus!

Answer 1

Die Antwort starrte mich ins Gesicht.

Es war nicht notwendig, .querySelector('.class-of-parent) zu verwenden, da die Zielelemente bereits innerhalb des übergeordneten Elements sind. Ich fügte this.parentElement.classList.toggle("active"); hinzu und es arbeitete wie ein Charme.

// Enables toggling all submenus individually 
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle'); 
for(var i in subMenuToggle) { 
    if(subMenuToggle.hasOwnProperty(i)) { 
    subMenuToggle[i].onclick = function() { 
     this.parentElement.querySelector('.children').classList.toggle("active"); 
     this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active"); 
     this.parentElement.classList.toggle("active"); // facepalm of obviousness 
    }; 
    } 
}