javascript - 如果子项当前处于事件状态，则使菜单父项展开

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 元素的“parent”。并应用 display:block 或任何其他使菜单元素可见的 css。检查下面的代码是否满足您的要求。

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

引用- https://api.jquery.com/parent/

---

引用-> Expand parent menu if child menu is selected

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