函数参数不适用于 .classList.add

Question

我创建了一个简单的函数来删除和添加类，但我无法让它工作，下面是要测试的 html，它需要工作，以便当鼠标输入 '.dropdown' 时，#myDropdown 将添加一个类它“显示”，当鼠标离开时，该类将被删除：

const dropDown = document.querySelector('.dropdown');

const dropDownList = dropDown.querySelector('#myDropdown');

const classToToggle = 'show';

dropDown.addEventListener("mouseenter", toggleClass(dropDownList, classToToggle));

dropDown.addEventListener("mouseleave", toggleClass(dropDownList, classToToggle));

function toggleClass(target, className) {

    if(target.classList.contains(className)) {

        target.classList.remove(className);

    } else {

        target.classList.add(className);

    }

}

<div class="dropdown">

        <a href="javascript:void(0)" class="dropbtn" style="outline: none;">Dropdown <i class="fas fa-chevron-down"></i></a>

        <div id="myDropdown" class="dropdown-content">

            <p>Item 1</p>

            <p>Item 2</p>

            <p>Item 3</p>

            <p>Item 4</p>

        </div>

    </div>

该函数只是没有将“className”添加到“target”，即使当我 console.log 时，“className”和“target”参数似乎都通过了。

Answer 1

addEventListener期望回调函数，而不是函数调用结果（在您的情况下会发生）。将您的函数包装在另一个函数中以解决问题：dropDown.addEventListener("mouseenter",&nbsp;()&nbsp;=>&nbsp;toggleClass(dropDownList,&nbsp;classToToggle)); dropDown.addEventListener("mouseleave",&nbsp;()&nbsp;=>&nbsp;toggleClass(dropDownList,&nbsp;classToToggle));