Question

根据标题，我制作了一个包含多个下拉列表的导航栏。我们的想法是在onmouseover上打开下拉菜单。

我写了以下功能：

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，并将其隐藏在mouseout上，其组织方式如下：

<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());
});

这应该让你入门

谢谢，阿希什

带有多个下拉列表的Navbar：如何干？

1 个答案: