如果子项当前处于活动状态，则使菜单父项展开

Question

我目前正在尝试制作一个菜单，该菜单在单击时可展开，保持打开状态，直到单击孩子为止，然后应将用户带到该页面，并且在到达该站点时仍应展开菜单。 （目前它崩溃了）。

我目前已经完成了我有一个菜单的部分，该菜单在单击时会展开并显示子项。它目前是用 javascript 制作的。我正在使用 wordpress 制作菜单，wordpress 会自动将类“current-menu-item”添加到正在访问的 li 中（如果有帮助的话）。

var clickMenu = function() {
	var getEls = document.getElementById("menu-shopmenu").getElementsByTagName("LI");
	var getAgn = getEls;

	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
			getEls[i].onmouseover=function() {
				this.className+=" hover";
			}
			getEls[i].onmouseout=function() {
				this.className=this.className.replace("hover", "");
			}
		}
	}
	
window.addEventListener("load", clickMenu);

现在我只是在寻求帮助，使其在新页面加载后保持扩展。

另外，这两个功能会不会在设计上产生冲突？

Answer 1

您可以只检查 current-menu-item 元素的“父级”。并应用 display:block 或任何其他使菜单元素可见的 css。 检查下面的代码是否符合您的要求。

$(document).ready(function(){
    $(".current-menu-item").parent("your_parent_ul_div").css("display": "block");
});

ref-https://api.jquery.com/parent/

---

ref->Expand parent menu if child menu is selected

ref->https://webdesignerhut.com/active-class-navigation-menu/