当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/