具有多個下拉菜單的導航欄：如何幹？

Question

根據標題，我正在製作一個具有多個下拉菜單的導航欄。這個想法是在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()功能。

怎麼辦？

Answer 1

建議使用forEach（）。

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

這應該讓你開始

感謝， 阿希什