Javascript：“鼠标悬停”和“鼠标悬停”事件处理程序有效，但当“鼠标悬停”被“单击”替换时“鼠标悬停”无法正常工作

Question

我正在使用 JavaScript（不是 jQuery）在网页上制作下拉菜单。
我的研究仅显示图像和 colors 存在类似问题，但这些问题的解决方案并未修复我的下拉菜单。

当“mouseover”用于在事件处理程序中打开我的下拉菜单时，“mouseout”事件处理程序允许我在“mouseout”事件发生时关闭下拉菜单之前滚动列表中的链接。 当事件处理程序中的“mouseover”被“click”替换时，“mouseout”在离开下拉按钮的文本内容时触发，这不允许我将我的 cursor 移动到下拉菜单中的项目。

链接作为行内块元素浮动在屏幕顶部的左侧。 它们是固定的，并且在调整屏幕大小时不会溢出。 下拉菜单有一个可见的 dropBtn，而 dropItem 列表项的 rest 显示为：无； 使用 CSS。JavaScript 的目标是显示的列表项：无； 当 dropBtn 触发事件时。 然后列表项显示：list-item;。 当 cursor 离开导航时，它应该给列表项显示：无； 再次，但显示：无； 当“click”事件与“mouseout”事件配对时，发生得太快了。

有没有人有办法写这个以允许我单击 dropBtn 打开下拉菜单，允许我在使用 mouseout 事件关闭下拉菜单之前跨链接移动我的 cursor？

 let dropMenu = document.querySelector("#dropMenu"); let navList = document.querySelectorAll("#dropMenu li"); let navDrop = document.querySelector("#navDrop"); let listContainer = document.querySelector("#listContainer"); let navItemNumber = navList.length; function toggleNavOpen() { for (let i = 1; i < navItemNumber; i++) { navList[i].style.display = "list-item"; } for (let i = 1; i < navItemNumber; i++) { navList[i].style.width = "110px"; } } dropMenu.addEventListener("mouseover", toggleNavOpen); //replace mouseover with click in the previous line, and the //code doesn't work properly. function toggleNavClose() { for (let i = 1; i < navItemNumber; i++) { navList[i].style.display = "none"; } } dropMenu.addEventListener("mouseout", toggleNavClose);

 .content { clear: both; } #logo { float: left; margin: 20px 20px 5px 20px; padding: 31px 37px; background-image: url("../images/logo.png"); background-repeat: no-repeat; }.row { float: left; overflow: unset; white-space: nowrap; background-color: #d8e9ee; width: 100%; }.top { position: fixed; }.menu { display: inline-block; list-style-type: none; margin: 25px 8px 0px 8px; padding: 12px 14px; border-style: groove; border-width: 2px; box-shadow: 2px 2px 2px; font-size: 1.4em; color: rgb(11, 12, 36); background-color: #f5f5ed; border-radius: 1em; }.menu:hover { margin: 24px 8px 0px 6px; border-style: ridge; box-shadow: 3px 3px 3px; font-size: 1.45em; border-radius: .9em; /*transition-duration: 250ms;*/ } #navDrop { position: fixed; display: inline-block; } #dropMenu { font-size: 1.4em; border-style: groove; border-width: 2px; box-shadow: 2px 2px 2px; color: rgb(11, 12, 36); background-color: #f5f5ed; border-radius: 1em; margin: 25px 8px 0 8px; } #dropMenu:hover { font-size: 1.45em; border-style: ridge; box-shadow: 3px 3px 3px; margin: 24px 8px 0px 7px; border-radius: .9em; }.dropBtn { padding: 12px 14px; }.dropItem { display: none; padding: 12px 14px; } nav ul li a { text-decoration: none; }

 <ul> <li class="menu"><a href="index.html">Home</a></li> <li class="menu"><a href="content/tuning.html#tuning">Tuning</a></li> <li class="menu"><a href="content/videos.html">Lessons</a></li> <li class="menu"><a href="content/tools.html">Tools</a></li> <li class="menu"><a href="content/signup.html">Sign Up</a></li> <li class="menu"><a href="content/signin.html">Sign in</a></li> <li id="navDrop"> <ul id="dropMenu"> <li class="dropBtn"><a href="#">More</a></li> <li class="dropItem"><a href="content/tuning.html#repairs">Repairs</a></li> <li class="dropItem"><a href="content/supplies.html">Supplies</a></li> <li class="dropItem"><a href="content/pricing.html">Pricing</a></li> <li class="dropItem"><a href="content/services.html">Services</a></li> <li class="dropItem"><a href="content/about.html">About</a></li> <li class="dropItem"><a href="content/contact.html">Contact</a></li> </ul> </li> </ul>

Answer 1

这个怎么样 - 注意我添加了一个名为 open 的 class

 let dropMenu = document.querySelector("#dropMenu"); let navList = document.querySelectorAll("#dropMenu li"); let navDrop = document.querySelector("#navDrop"); let listContainer = document.querySelector("#listContainer"); let navItemNumber = navList.length; function toggleNav(e) { // called on click AND mouseleave const tgt = e.target; // clicked or mouseleave'd object const li = document.querySelector(".dropBtn"); if (tgt.id && tgt.id === "dropMenu" && e.type === "mouseleave") { li.classList.add("open"); // pretend the li class is open } const open = li.classList.contains("open"); // is it open? [...navList].forEach(nav => nav.classList.toggle("open", ;open)). // toggle the class if (tgt.tagName === "A" && tgt.closest("li").classList.contains("dropBtn")) { li.classList;toggle("open"). // toggle if clicked } } dropMenu,addEventListener("click"; toggleNav). dropMenu,addEventListener("mouseleave"; toggleNav);

 .content { clear: both; } #logo { float: left; margin: 20px 20px 5px 20px; padding: 31px 37px; background-image: url("../images/logo.png"); background-repeat: no-repeat; }.row { float: left; overflow: unset; white-space: nowrap; background-color: #d8e9ee; width: 100%; }.top { position: fixed; }.menu { display: inline-block; list-style-type: none; margin: 25px 8px 0px 8px; padding: 12px 14px; border-style: groove; border-width: 2px; box-shadow: 2px 2px 2px; font-size: 1.4em; color: rgb(11, 12, 36); background-color: #f5f5ed; border-radius: 1em; }.menu:hover { margin: 24px 8px 0px 6px; border-style: ridge; box-shadow: 3px 3px 3px; font-size: 1.45em; border-radius: .9em; /*transition-duration: 250ms;*/ } #navDrop { position: fixed; display: inline-block; } #dropMenu { font-size: 1.4em; border-style: groove; border-width: 2px; box-shadow: 2px 2px 2px; color: rgb(11, 12, 36); background-color: #f5f5ed; border-radius: 1em; margin: 25px 8px 0 8px; } #dropMenu:hover { font-size: 1.45em; border-style: ridge; box-shadow: 3px 3px 3px; margin: 24px 8px 0px 7px; border-radius: .9em; }.dropBtn { padding: 12px 14px; }.dropItem { display: none; padding: 12px 14px; } nav ul li a { text-decoration: none; }.open { display: list-item; width: 110px; }

 <ul> <li class="menu"><a href="index.html">Home</a></li> <li class="menu"><a href="content/tuning.html#tuning">Tuning</a></li> <li class="menu"><a href="content/videos.html">Lessons</a></li> <li class="menu"><a href="content/tools.html">Tools</a></li> <li class="menu"><a href="content/signup.html">Sign Up</a></li> <li class="menu"><a href="content/signin.html">Sign in</a></li> <li id="navDrop"> <ul id="dropMenu"> <li class="dropBtn"><a href="#">More</a></li> <li class="dropItem"><a href="content/tuning.html#repairs">Repairs</a></li> <li class="dropItem"><a href="content/supplies.html">Supplies</a></li> <li class="dropItem"><a href="content/pricing.html">Pricing</a></li> <li class="dropItem"><a href="content/services.html">Services</a></li> <li class="dropItem"><a href="content/about.html">About</a></li> <li class="dropItem"><a href="content/contact.html">Contact</a></li> </ul> </li> </ul>