Javascript 下拉菜单不起作用

Question

我正在尝试使用 Javascript(无 JQuery)制作下拉菜单。在我的 HTML 中，我有一个包含两个列表项的无序列表，每个列表项包含一个 anchor 和一个包含更多列表项的无序列表。

我不关心菜单是否漂亮，只关心 Javascript 是否有效。现在，我正试图让它通过一个while 循环，这样当鼠标悬停在顶级列表项上时，下级列表项的类别将从 CSS 设置为显示的类别更改为:无；到一个有 display:block 的类；使它们出现。

我这里只有两个选项卡，但那是因为我从十个选项卡的列表中缩短了它。我也不关心任何进一步的子菜单。

JS fiddle :https://jsfiddle.net/xL5pukd5/

HTML:

<header>
  <!-- <ul>   <li><a></a><ul>   <li><a></a></li>   -->
  <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
  <nav id="dd-menu-container">
    <ul id="dd-menu">
      <li class="dd-menu-tab">
        <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a>
        <ul class="dd-submenu">
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">SubLink1a</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink1b</a></li>
        </ul>
      </li>
      <li class="dd-menu-tab">
        <a href="link2.htm" class="dd-menu-tab-anchor" title="link2">Link2</a>
        <ul class="dd-submenu">
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublimn2a</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink2b</a></li>
          <li class="dd-submenu-tab">
            <a href="#" class="dd-submenu-tab-anchor">Sublink2c</a></li>
        </ul>
      </li>

  </nav>

</header>

JavaScript:

getTabs = function(elementClass) {
  var tabs = document.getElementsByClassName(elementClass);
  return tabs
};
getSubmenus = function(elementClass) {
  var submenus = document.getElemenetsByClassName(elementClass);
  return submenus;
};

window.onload = function {
  var tabs = getTabs("dd-menu-tab");
  var submenus = getSubmenus("dd-submenu");
  var tabNumber = tabs.length - 1;
  var currentTab = 0;
  while (currentTab <= tabNumber) {
    tabs[currentTab].onmouseover = function {
      submenus[currentTab].className = "dd-submenu-onmouseover"
    };
    tabs[currentTab].onmouseout = function {
      submenus[curenetTab].className = "dd-submenu"
    };
    currentTab += 1;
  }
};

CSS:

.dd-submenu {
  display: none;
}

.dd-submenu-onmouseover {
  display: block;
}

我试过使用其他预先编写的下拉菜单方法，但无法使它们起作用，所以我尝试创建自己的方法。在此先感谢您的帮助:)

Answer 1

您的脚本存在多个问题，包括评论中提到的拼写错误和 wrong use of a closure variable in a loop .

但是你真的不需要 js 来解决这个问题，你可以使用 :hover css 选择器来完成它

html,
body {
  margin: 0;
  padding: 0;
}
nav {
  display: block;
  padding: 0px;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  background-color: beige;
}
.dd-menu-tab-anchor {
  display: inline-block;
  color: white;
}
.dd-menu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.dd-menu-tab {
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: auto;
  padding-right: auto;
  width: 9%;
  text-align: center;
}
.dd-submenu {
  display: none;
}
.dd-menu-tab:hover .dd-submenu {
  display: block;
}
li {
  list-style-type: none;
  background-color: #3300FF;
  border: 2px;
  border-color: white;
}
a {
  text-align: center;
}

<header>
  <!-- <ul>   <li><a></a><ul>   <li><a></a></li>   -->
  <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
  <nav id="dd-menu-container">
    <ul id="dd-menu">
      <li id="dd-menu-tab1" class="dd-menu-tab">
        <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a>
        <ul id="dd-submenu1" class="dd-submenu">
          <li id="dd-submenu1-tab1" class="dd-submenu-tab">
            <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a>
          </li>
          <li id="dd-submenu1-tab2" class="dd-submenu-tab">
            <a href="" id="" class="">Sublink1b</a>
          </li>
        </ul>
      </li>
      <li id="dd-menu-tab2" class="dd-menu-tab">
        <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a>
        <ul id="dd-submenu2" class="dd-submenu">
          <li id="dd-submenu2-tab1" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a>
          </li>
          <li id="dd-submenu2-tab2" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a>
          </li>
          <li id="dd-submenu2-tab3" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a>
          </li>
        </ul>
      </li>

  </nav>

</header>
<div>
  <h1 id="site title">Website.com</h1>
</div>

<body>
  <p>First paragraph sample text</p>
  <p>Second paragraph sample text</p>
  <p>Third paragraph sample text</p>


</body>
<footer>
  <p>
    References
  </p>
  <!-- <script src="file.js" type="text/javascript"></script> -->
</footer>

</html>

---

如果你还想继续使用你的逻辑

getTabs = function(elementClass) {
  var tabs = document.getElementsByClassName(elementClass);
  console.log(tabs);
  return tabs
};
getSubmenus = function(elementClass) {
  var submenus = document.getElementsByClassName(elementClass);
  console.log(submenus);
  return submenus;
};

window.onload = function() {
  var tabs = getTabs("dd-menu-tab");
  var submenus = getSubmenus("dd-submenu");
  var tabNumber = tabs.length - 1;
  var currentTab = 0;
  [].forEach.call(tabs, function(el, idx) {
    var submenu = submenus[idx];
    el.addEventListener('mouseenter', function() {
      submenu.className = "dd-submenu-onmouseover"
    });
    el.addEventListener('mouseleave', function() {
      submenu.className = "dd-submenu"
    });
  })
};

html,
body {
  margin: 0;
  padding: 0;
}
nav {
  display: block;
  padding: 0px;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  background-color: beige;
}
.dd-menu-tab-anchor {
  display: inline-block;
  color: white;
}
.dd-menu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.dd-menu-tab {
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: auto;
  padding-right: auto;
  width: 9%;
  text-align: center;
}
.dd-submenu {
  display: none;
}
.dd-submenu-onmouseover {
  display: block;
}
li {
  list-style-type: none;
  background-color: #3300FF;
  border: 2px;
  border-color: white;
}
a {
  text-align: center;
}

<header>
  <!-- <ul>   <li><a></a><ul>   <li><a></a></li>   -->
  <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
  <nav id="dd-menu-container">
    <ul id="dd-menu">
      <li id="dd-menu-tab1" class="dd-menu-tab">
        <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a>
        <ul id="dd-submenu1" class="dd-submenu">
          <li id="dd-submenu1-tab1" class="dd-submenu-tab">
            <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a>
          </li>
          <li id="dd-submenu1-tab2" class="dd-submenu-tab">
            <a href="" id="" class="">Sublink1b</a>
          </li>
        </ul>
      </li>
      <li id="dd-menu-tab2" class="dd-menu-tab">
        <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a>
        <ul id="dd-submenu2" class="dd-submenu">
          <li id="dd-submenu2-tab1" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a>
          </li>
          <li id="dd-submenu2-tab2" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a>
          </li>
          <li id="dd-submenu2-tab3" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a>
          </li>
        </ul>
      </li>

  </nav>

</header>
<div>
  <h1 id="site title">Website.com</h1>
</div>

<body>
  <p>First paragraph sample text</p>
  <p>Second paragraph sample text</p>
  <p>Third paragraph sample text</p>


</body>
<footer>
  <p>
    References
  </p>
</footer>

演示:Fiddle