Javascript下拉菜单无效

时间：2016-02-29 08:00:00

标签： javascript html css drop-down-menu

我正在尝试使用Javascript（没有JQuery）创建一个下拉菜单。在我的HTML中，我有一个无序列表，其中包含两个列表项，每个列表项包含一个锚点和一个包含更多列表项的无序列表。

我不关心菜单看起来很漂亮，只是Javascript工作。现在，我试图让它通过一个设置事件监听器 while循环，以便当顶级列表项被鼠标悬停时，下面列表项的类将从CSS设置为display：none;到具有显示的类：块;使它们出现。

我这里只有两个标签，但这是因为我从十个标签的列表中缩短了它。我也不在乎任何进一步的子菜单。

JS小提琴：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;
}

我尝试使用其他预先写好的下拉菜单方法，但我无法让它们工作，所以我尝试创建自己的。在此先感谢任何帮助：）

2 个答案:

答案 0 :(得分：0)

您的脚本存在多个问题，包括评论和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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
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 {
  position:absolute;
  display: block;
}
li {
  list-style-type: none;
  background-color: #3300FF;
  border: 2px;
  border-color: white;
}
a {
  text-align: center;
}
＆＃13; 
<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>
＆＃13; 
let keys = [1,2,3,4]
let values = [10, 20, 30, 40]
assert(keys.count == values.count)

var dict:[Int:Int] = [:]
keys.enumerate().forEach { (i) -> () in
    dict[i.element] = values[i.index]
}
print(dict) // [2: 20, 3: 30, 1: 10, 4: 40]
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题