javascript - Javascript：“Mouseover”和“mouseout”事件处理程序可以工作，但是当“mouseover”被“click”替换时“mouseout”不能正常工作

Question

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

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

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

有没有人有办法写这个来让我点击 dropBtn 打开下拉菜单，让我在使用 mouseout 事件关闭下拉菜单之前在链接上移动光标？

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>

标签： javascripthtmlcss

Answer 1

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

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>