Question

我正在学习Javascript（非常开始），当我将焦点应用于元素时，尝试制作隐藏的“子导航”菜单时出现问题。我保持它非常基本（我认为）。

这个想法与在悬停时显示隐藏的“子导航”菜单相同。当应用用户选项卡到元素和焦点时，菜单显示并且菜单中的链接变得可聚焦。当用户选中菜单时，菜单会再次隐藏。我想在任意数量的导航元素上发生这种情况。

HTML：

<nav role="navigation">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#" class="has-dropdown">Link 2</a>
         <ul class="dropdown">
            <li><a href="#">Link 2a</a></li>
            <li><a href="#">Link 2b longer</a></li>
            <li><a href="#">Link 2c longest text</a></li>
         </ul>
      </li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
   </ul>
</nav>

不确定你需要它，但这里是CSS：

nav[role=navigation] {
  width: 100%;
  background: #505050;
  font-family: Oswald,sans-serif;
  font-weight: 200;
}

nav[role=navigation] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

nav[role=navigation] ul li {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  text-align: center;
  padding: .8333rem;
  border-right: 1px solid #252525;
  position: relative;
}

nav[role=navigation] ul li:last-of-type {
  border-right: none;
}

nav[role=navigation] ul li:hover a + ul {
  display: block;
}

nav[role=navigation] ul ul {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #252525;
  padding: 0;
  width: 200%;
  text-align: left;
  display: none;
}

nav[role=navigation] ul ul.active {
  display: block;
}

nav[role=navigation] ul a {
  padding: 0 1rem;
  color: #fff;
  text-decoration: none;
}

nav[role=navigation] ul a:focus,
nav[role=navigation] ul a:hover {
  text-decoration: underline;
  color: #ccc;
}

Javascript：

var topLevel = document.getElementsByClassName("has-dropdown");

for (var i = 0; i < topLevel.length; i++) {
   topLevel[i].onfocus = function() {
      console.log("you have activated the dropdown");
      topLevel.nextElementSibling.className = "active";
   }
}

当我选择触发此操作的链接时，我会在任何具有子菜单但未显示子菜单的链接上正确获取日志消息。当我从控制台运行时，我收到错误“无法设置属性”className“of undefined。”

我认为这与变量是一个数组有关，因为如果我设置了topLevel的索引，例如 topLevel [0] ，它就可以正常工作。

我想使用vanilla JS。没有JQuery。

我搜索过类似的问题，但无法找到任何可以解决的问题，或者只能提供JQuery解决方案。

我看过：

CSS3 drop down menu
For-each over an array in JavaScript? - ＆gt;这个让我的大脑流血 Target items in an array on click?
How to split an array with retrieved values from DOM

答案可能隐藏在上述某个帖子中，但如果是，我找不到。感谢您帮助初学者。

无法使用javascript将焦点事件添加到元素

0 个答案: