Question

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

我在CodePen上有一个演示：https://codepen.io/mikejandreau/pen/eRvOBQ

还有一个开发站点在这里使用相同的菜单：http://losaidos.com/dev/baseinstall/。

这是当前控制子菜单的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");
    };
  }
}

我尝试通过将其添加到subMenuToggle[i].onclick函数来重复逻辑：

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

但到目前为止还没有运气让它运转起来。我感觉自己已经接近但却遗漏了一些明显的东西。

任何指针都会非常感激 - 提前谢谢！

Answer 1

答案是盯着我的脸。

没有必要使用.querySelector('.class-of-parent)，因为目标元素已经在父元素中。我添加了this.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
    };
  }
}

在没有jQuery的情况下切换父元素onclick的类

1 个答案: