Javascript 在不使用jQuery的情况下切换父元素onclick的类

当子ul元素处于活动状态时，我尝试切换父li元素的类。我知道如何在jQuery中实现这一点，但是这个项目的目标是不依赖像Bootstrap或jQuery这样的库

我有一个关于CodePen的演示：

这里还有一个使用相同菜单的开发人员站点：

这是当前控制子菜单切换的JavaScript：

// 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");
    };
  }
}

但到目前为止还没有成功。我感觉自己很接近，但错过了一些明显的东西

---

任何提示都将不胜感激-提前感谢

答案就在我面前

不需要使用

.querySelector（'.class of parent）

，因为目标元素已经在父元素中。我添加了

这个.parentElement.classList.toggle（“active”）它就像一个符咒

// 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
    };
  }
}

不要对节点列表中的…使用
。使用
for（var i=0；i
，或者如果您的浏览器支持它，则使用
submenutogle.forEach
我根据您的建议更新了我的CodePen演示，但它似乎没有起到作用。我可能做错了-这是更新的演示：。
// 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
    };
  }
}