如何用JavaScript针对触发元素实现通用下拉菜单切换？

问题背景 #

我用HTML、CSS和JavaScript开发了一个响应式网站：桌面端通过CSS :hover事件触发下拉菜单，移动端则依赖JavaScript事件实现菜单折叠。当前菜单中有两个带下拉功能的div，我通过为每个元素设置唯一onclick事件，结合getElementById来添加/移除折叠类。功能可用，但新增下拉项时扩展性极差。我希望编写单个事件函数，对触发事件的div进行类的添加/移除操作，请问这个思路是否正确？该如何实现？

原有代码示例 #

HTML代码

<div class="dropdown-link" id="parentone">
    <!--link for the first parent menu-item-->
    <a class="menu-link" href="parent-one">Parent One</a>
    <!--div for the first dropdown-arrow-->
    <div class="dropdown-klick" id="parentonearrow" onclick="parentonedropdowntoggle()"></div>
    <!--div for the first dropdown-men-->
    <div class="dropdown-menu" id="parentonedropdown">
        <a class="menu-link" href="parent-one/item-one">Dropdown One Item</a>
        <a class="menu-link" href="parent-one/item-two">Dropdown One Item</a>
    </div>
</div>

JavaScript代码

//Code for toggling the adressed menu with unique events.
function parentonedropdowntoggle() {
  document.getElementById("parentone").classList.toggle("parentopen");
  document.getElementById("parentonearrow").classList.toggle("dropdownclose");
  document.getElementById("parentonedropdown").classList.toggle("dropdownopen");

//Code for closing the other dropdown-menu, when opened
  document.getElementById("parenttwo").classList.remove("dropdownclose");
  document.getElementById("parenttwoarrow").classList.remove("dropdownclose");
  document.getElementById("parenttwodropdown").classList.remove("dropdownopen");
}

解决方案 #

你的思路完全正确，核心是通过事件对象获取触发源，再基于DOM结构关系定位关联元素，摆脱对唯一ID的依赖，实现通用化处理。具体步骤如下：

1. 重构HTML结构（统一类名，移除硬编码事件） #

去掉每个下拉项的唯一ID和独立onclick绑定，仅保留通用类名，确保所有下拉项结构一致：

<div class="dropdown-link">
    <a class="menu-link" href="parent-one">Parent One</a>
    <div class="dropdown-klick"></div>
    <div class="dropdown-menu">
        <a class="menu-link" href="parent-one/item-one">Dropdown One Item</a>
        <a class="menu-link" href="parent-one/item-two">Dropdown One Item</a>
    </div>
</div>

<div class="dropdown-link">
    <a class="menu-link" href="parent-two">Parent Two</a>
    <div class="dropdown-klick"></div>
    <div class="dropdown-menu">
        <a class="menu-link" href="parent-two/item-one">Dropdown Two Item</a>
        <a class="menu-link" href="parent-two/item-two">Dropdown Two Item</a>
    </div>
</div>

2. 编写通用JavaScript事件处理函数 #

利用event.target获取触发点击的箭头元素，再通过closest()和querySelector()定位关联的父容器与下拉菜单，实现批量处理：

// 给所有下拉箭头批量绑定点击事件
document.querySelectorAll('.dropdown-klick').forEach(arrow => {
    arrow.addEventListener('click', dropdownToggle);
});

function dropdownToggle(e) {
    // 获取当前点击的箭头元素
    const currentArrow = e.target;
    // 向上查找最近的下拉父容器
    const currentParent = currentArrow.closest('.dropdown-link');
    // 获取当前容器内的下拉菜单
    const currentDropdown = currentParent.querySelector('.dropdown-menu');

    // 切换当前下拉项的状态类
    currentParent.classList.toggle('parentopen');
    currentArrow.classList.toggle('dropdownclose');
    currentDropdown.classList.toggle('dropdownopen');

    // 关闭其他所有已展开的下拉项
    document.querySelectorAll('.dropdown-link').forEach(parent => {
        if (parent !== currentParent) {
            parent.classList.remove('parentopen');
            parent.querySelector('.dropdown-klick').classList.remove('dropdownclose');
            parent.querySelector('.dropdown-menu').classList.remove('dropdownopen');
        }
    });
}

3. 方案优势 #

• 无ID依赖：完全通过类名和DOM结构关系定位元素，新增下拉项无需修改JS
• 自动绑定：querySelectorAll批量绑定事件，新增的下拉项只要结构一致就会自动生效
• 逻辑清晰：通过事件源向上遍历父容器，避免硬编码关联关系，维护成本极低

内容的提问来源于stack exchange，提问作者user20622668