Question

作为一个初学者，即使是看似最简单的事情，我也无所适从，但也许我的目标太高了，仅几周前才开始学习。我试图仅坚持HTML，CSS和原始Javascript，这样一来，我就不必在基础知识的基础上开始学习其他框架的语法。我试图从我在w3，这里等中学到的解决方案摘要拼凑在一起，但是，我并不假装不完全了解我正在阅读和使用的内容。

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

假定宽窗口允许“ Portfolio”上的悬停事件仅显示主菜单右侧的子菜单项，而无需按下其他菜单项。
应该使用一个狭窄的窗口来启用/监视“ Portfolio LI”上的“ click”事件，并在触发该窗口时应按下其他菜单项，并在“ Portfolio”正下方以块格式显示子菜单项。
当窗口较宽时，三角形/箭头应自动切换为指向右，如果窗口较窄，则应自动切换为指向上方或向下，具体取决于子菜单是否显示是否显示（如果未显示则显示为向下，如果显示则显示为向上）。
单击子菜单中的任何项目，应该会折叠该子菜单并翻转箭头再次指向下方。

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

我有使用CSS进行悬停的事件，但是一旦引入任何Javascript代码以允许click事件，它就停止工作。因此，我放弃了CSS方法，甚至不记得是否可以再次使用宽窗/悬停功能。
使用Javascript，我可以正常执行click事件，但是有些错误。
- 当窗口变窄时，由于某种原因，需要两次单击“组合”以将箭头指向上方并显示子菜单。第一次单击仅将箭头从下向上翻转，然后第二次单击显示子菜单。只需单击一下即可完成所有这一切。
- 一旦addEventListener触发了对Portfolio的单击（在一个狭窄的窗口中），如果该窗口返回到较宽的位置，则removeEventListener似乎什么也不做，并且菜单将像缩小窗口一样继续工作。当窗口很宽时，我希望菜单返回到具有“ Portfolio”的悬停事件的菜单；我不希望在窗口变大时启用click事件。

我提供了我拥有的代码，并且将其放在一个文档中，而不是单独的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

您删除了submenuId的eventListener，但没有删除“ submenu_class”
再次检查您的resetSubmenus()功能。您可以通过右侧的Chrome Devtool“元素->事件监听器”检查将哪些事件监听器附加到元素上

IF / Else条件对addEventListener / removeEventListener

1 个答案: