导航栏会有多个菜单,每个菜单可以有子菜单。当用户将鼠标悬停在菜单 div - 父级上时(mouseenter & mouseleave)出现子菜单。但是用户可以单击父 url,然后打开另一个页面并使用相同的导航菜单,目前如果用户转到该页面,父菜单已经打开。我希望它默认关闭,与此 gif 视频中的相同:https://imgur.com/a/OEK8ExD
var el = document.querySelector("#menu");
el.addEventListener("mouseenter", function() {
console.log("mouseenter");
document.querySelector("#submenu").classList.remove("hidden");
})
el.addEventListener("mouseleave", function() {
console.log("mouseleave");
document.querySelector("#submenu").classList.add("hidden");
})
.hidden {
display: none;
}
<div id="menu" style="padding: 10px; background: gray;">
<a href="./index.html">menu</a>
</div>
<div id="submenu" class="hidden">
<ul>
<li>submenu1</li>
<li>submenu2</li>
</ul>
</div>
在这里找不到类似的问题,但我相信这是一个重复的问题。