当sub 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");


但是到目前为止,要使它正常工作还没有运气。我感到自己接近了,但缺少明显的东西。

任何指针将不胜感激-预先感谢!

最佳答案

答案盯着我。

不需要使用.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
    };
  }
}

关于javascript - 在没有jQuery的情况下切换父元素onclick的类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44608951/

10-11 23:24
查看更多