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-＆GT; Expand parent menu if child menu is selected

REF-＆GT; https://webdesignerhut.com/active-class-navigation-menu/

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

1 个答案: