Javascript 函数参数不能与.classList.add一起使用

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

const dropDown=document.querySelector（'.dropDown'）；
const dropDownList=dropDown.querySelector（“#myDropdown”）；
const classtoggle='show'；
addEventListener（“mouseenter”，toggleClass（dropDownList，classtoggle））；
addEventListener（“mouseleave”，toggleClass（dropDownList，classtoggle））；
函数toggleClass（目标，类名）{
if（target.classList.contains（className））{
target.classList.remove（className）；
}否则{
target.classList.add（className）；
}
}

项目1

项目2

项目3

项目4

addEventListener

需要回调函数，而不是函数调用结果（在您的情况下会发生这种情况）。将函数包装到另一个函数中以解决此问题：

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

---

您对

.addEventListener（）

的调用错误。代码调用

toggleClass（）

函数，并将返回值传递给

.addEventListener（）

。您必须将对

toggleClass（）

的调用包装到另一个匿名函数中。是否有特定的原因需要使用JavaScript完成此操作？在Javascript中这样做纯粹是为了学习，但是请欣赏CSS的答案。