javascript - IF/Else 条件对 addEventListener/removeEventListener 没有影响

Question

作为初学者，即使是看似最简单的事情，我也无法深入，但也许我的目标太高了，因为几周前才刚刚开始学习。 我试图坚持只使用 HTML、CSS 和 vanilla Javascript，这样我就不必一开始就在基础知识之上学习其他框架的语法。 我试图将我在 w3、这里等学到的解决方案片段拼凑在一起，但是，我并没有假装完全理解我正在阅读和使用的内容。

我需要一个简单的垂直菜单，如下所示。目前，并且可能永远只有，主菜单中的一项(“投资组合”)将具有子菜单项。子菜单的外观和功能取决于窗口的宽度:

• 宽窗口应该允许“投资组合”上的悬停事件仅显示主菜单右侧的子菜单项，而无需下推其他菜单项。
• 窄窗口应该启用/监视 Portfolio LI 上的“点击”事件，当触发时，它应该下推其他菜单项并在“Portfolio”正下方以 block 格式显示子菜单项。
• 三 Angular 形/箭头应该在窗口较宽时自动切换为指向右侧，如果窗口较窄则应自动切换为指向上方或下方，具体取决于子菜单是否显示或不显示(如果不显示则向下，如果显示则向上)。
• 点击子菜单中的任何元素应该会折叠子菜单并翻转箭头再次指向下方。

但是，有些“错误”是我无法弄清楚的。

1. 我使用 CSS 使悬停事件正常工作，但是当我引入任何 Javascript 代码以允许点击事件时它立即停止工作。所以我放弃了 CSS 方法，甚至不记得我是否曾经让宽窗口/悬停功能再次起作用。
2. 使用 Javascript，我的点击事件可以正常工作，但有几处是错误的。
   • 当窗口变窄时，出于某种原因需要在“投资组合”上单击两次才能翻转箭头指向上方并显示子菜单。第一次单击只是将箭头从下向上翻转，然后第二次单击显示子菜单。只需单击一下，这两件事就会发生。
   • 一旦 addEventListener 触发了 Portfolio 的点击(在窄窗口中)，如果窗口再次变宽，removeEventListener 似乎什么都不做，菜单继续工作，就好像窗口很窄一样。当窗口变宽时，我希望菜单返回到“投资组合”的悬停事件；我不想在窗口很宽时启用点击事件。

我提供了我拥有的代码，并将其放在一个文档中，而不是单独的 CSS 和 Javascript。 (我希望我已经正确格式化了代码。)

function openSubmenu() {
  this.setAttribute('class', 'submenu_class showSubmenu');
  document.getElementById("submenuID").textContent = "Portfolio ▲";
  this.onclick = resetSubmenus;
}

function resetSubmenus() {
  var submenuElements = document.getElementsByClassName('submenu_class');
  for (var i = 0; i < submenuElements.length; i++) {
    submenuElements[i].setAttribute('class', 'submenu_class');
    submenuElements[i].onclick = openSubmenu;
    document.getElementById("submenuID").textContent = "Portfolio ▼";
  }
}

function screenWidthFunction(x) {
  if (x.matches) { //if it's a narrow screen
    document.getElementById("submenuID").textContent = "Portfolio ▼";
    document.getElementById("submenuID").addEventListener("click", openSubmenu);
  } else {
    document.getElementById("submenuID").textContent = "Portfolio ►";
    document.getElementById("submenuID").removeEventListener("click", openSubmenu);
  }
}

var x = window.matchMedia("(max-width: 480px)")
screenWidthFunction(x) // Call listener function at run time
x.addListener(screenWidthFunction) // Attach listener function on state changes

body {
  background-color: black;
}

nav ul {
  position: relative;
  text-align: left;
}

nav ul li {
  display: block;
  /* WHAT????  REMOVING THIS ACTUALLY MAKES TEXT-DECORATIONS REAPPEAR.... WHY???*/
}

nav a {
  text-decoration: none;
}


/* Hide dropdowns by default */

nav ul ul {
  position: relative;
  display: none;
  left: 0;
}


/* Display Dropdowns on Click */

nav ul li.showSubmenu>ul {
  display: block;
  position: relative;
  width: 30%;
}

.menu a {
  text-decoration-style: none;
  text-decoration: none;
  background-color: black;
  color: white;
}

.menu a:hover {
  background-color: white;
  color: black;
}

<nav class="menu">
  <ul>
    <li class="menuItem"><a href="#">Home</a></li>
    <li class="menuItem"><a href="#">About</a></li>
    <li class="submenu_class"><a href="#"><span id="submenuID">Portfolio ▼</span></a>
      <ul>
        <li><a href="#">Landscape</a></li>
        <li><a href="#">Architecture</a></li>
        <li><a href="#">Animal</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </li>
    <li class="menuItem"><a href="#">Information</a></li>
    <li class="menuItem"><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

1. 您删除了 submenuId 的 eventListener，但没有删除“submenu_class”
2. 再次检查您的resetSubmenus() 函数。您可以通过右侧的 Chrome Devtool“element -> event listeners”检查您的元素附加了哪些事件监听器