有没有办法可以对单击时有下拉列表的导航项目列表重复使用切换功能？

Question

这里我有 3 个 addEventListeners，它们在单击时调用一个函数，根据单击的导航项打开下拉菜单。

我的问题是，一旦单击第一个菜单项，它就会打开和关闭，但其余的则不起作用。

document.getElementById('product-menu').addEventListener('click', openMenu);
document.getElementById('company-menu').addEventListener('click', openMenu);
document.getElementById('connect-menu').addEventListener('click',openMenu);

function openMenu(){
    document.getElementById('dropdown-menu').classList.toggle('active')
};

我试图允许重用切换功能来打开每个导航项上的下拉菜单。

Answer 1

在事件监听器中传递应激活的菜单的 ID 作为参数。

document.getElementById('product-menu').addEventListener('click',
    () => openMenu('dropdown-menu');
document.getElementById('company-menu').addEventListener('click', 
    () => openMenu('dsecond-menu');
document.getElementById('connect-menu').addEventListener('click', 
    () => openMenu('third-menu');

function openMenu(menu_id){
    document.getElementById(menu_id).classList.toggle('active')
};