具有多个下拉菜单的导航栏：如何干？

根据标题，我正在制作一个具有多个下拉菜单的导航栏。这个想法是在mouseover上打开下拉菜单。具有多个下拉菜单的导航栏：如何干？

我写了下面的功能：

function toggleStudies() {document.getElementsByClassName('dropdown-content')[0].classList.toggle("show")} 
function toggleUtils() {document.getElementsByClassName('dropdown-content')[1].classList.toggle("show")}

...最多('dropdown-content')[4]。

此外，我也只好把函数两次各div，就像这样：

<div class="dropdown" onmouseout="toggleStudies()" onmouseover="toggleStudies()" >

尽管它应该显示，当鼠标悬停，隐藏div，这是dropdown-content，并隐藏其重新打开这样组织的鼠标：

<div class="dropdown" onmouseout="toggleStudies()" onmouseover="toggleStudies()" > 
     <button class="dropbtn" >Studies</button> 
     <div class="dropdown-content"> 
      <a href="#">X</a> 
      <a href="#">Y</a> 
      <a href="#">W</a> 
      <a href="#">Z</a> 
     </div>

重复另外四次。

它是这样工作的。但是，我想要的是让它DRYer。

我曾经想过一个循环，将addEventListener的onmouseover和onmouseout所有<div class="dropdown">"元素，但我想不通的是可以传递，因此，它会替代前五年function toggle()功能。

怎么办？

来源

2017-08-06 Paulo Soares

添加悬停监听器'了'标签，然后在回调您可以访问悬停用'this'的一个 – Nicholas

建议使用forEach（）。

var dropdown = querySelectorAll(".dropdown"); 
dropdown.forEach(function(){ 
    this.addEventListener(onmouseout, toggleStudies()); 
    this.addEventListener(onmousein, toggleStudies()); 
});

这应该让你开始

感谢，阿希什

来源

2017-08-06 16:27:03

具有多个下拉菜单的导航栏：如何干？

回答

相关问题