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

Question

根据标题，我正在制作一个带有多个下拉菜单的导航栏。这个想法是在鼠标悬停时打开下拉菜单。

我写了以下函数：

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>

又重复了四次。

它是这样工作的。但是，我想要的是让它更干燥。

我曾考虑过一个循环，它将 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());
});

这应该让你开始

谢谢， 阿什什