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

Question

作为一个初学者，我对看似最简单的事情也没有深入的研究，但也许我的目标太高了，仅仅几周前我才刚开始学习。我只想坚持HTML、CSS和普通Javascript，这样我就不必在基础知识的基础上学习其他框架的语法了。我试着从w3学到的东西中拼凑出一些解决方案，但是，我并不假装完全理解我正在阅读和使用的内容。

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

• 一个宽窗口应该允许“组合”上的悬停事件只在主菜单的右边显示子菜单项，而不按下其他菜单项。
• 窄窗口应该启用/监视Portfolio上的'click‘事件，当触发时，它应该按下其他菜单项，并以块格式显示"Portfolio“下面的子菜单项。
• 三角形/箭头应该在窗口宽时自动切换到右边，如果窗口很窄，则自动切换到向上或向下，这取决于子菜单是否显示(如果没有显示则向下显示，如果正在显示则向上或向下切换)。
• 单击子菜单中的任何项目应该会折叠子菜单并将箭头翻转以再次向下指向。

然而，有一些‘bug’，我就是搞不懂。

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

​

我提供了我的代码，我把它放在一个文档中，而不是单独的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. 您删除了eventListener for submenuId，但没有删除“submenu_class”
2. 再次检查您的resetSubmenus()函数。您可以通过右侧的Chrome "element ->事件监听器“检查将哪些事件侦听器附加到元素上。