如何复用Toggle函数实现多个导航下拉菜单的点击切换功能？

问题根源 #

1. HTML结构错误：company-menu和connect-menu的<li>标签提前闭合（</li>写在了<a>标签之前），导致点击事件绑定的是空的<li>元素，实际点击的<a>标签不在该<li>范围内，无法触发绑定的点击事件。同时三个下拉菜单使用了重复的id="dropdown-menu"，HTML中ID必须唯一，getElementById只会返回第一个匹配的元素，所以只有第一个下拉菜单能被操作。
2. JS逻辑缺陷：原openMenu函数固定获取第一个dropdown-menu元素，无法关联到当前点击的导航项对应的下拉菜单。

修正方案 #

第一步：修复HTML结构

• 调整company-menu和connect-menu的<li>标签闭合位置，确保<a>和下拉菜单<ul>都包含在<li>内
• 将重复的id="dropdown-menu"改为class="dropdown-menu"，避免ID冲突

修正后的HTML代码：

<li id="product-menu" class="dropdown">
  <a class="drop-item" href="#">Product<img src="images/icon-arrow-dark.svg" alt=""/></a>
  <ul class="dropdown-menu">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">MarketPlace</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Integrations</a></li>
  </ul>
</li>

<li id="company-menu" class="dropdown">
  <a class="drop-item" href="#">Company<img src="images/icon-arrow-dark.svg" alt=""/></a>
  <ul class="dropdown-menu">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">MarketPlace</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Integrations</a></li>
  </ul>
</li>

<li id="connect-menu" class="dropdown">
  <a class="drop-item" href="#">Connect<img src="images/icon-arrow-dark.svg" alt=""/></a>
  <ul class="dropdown-menu">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">MarketPlace</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Integrations</a></li>
  </ul>
</li>

第二步：优化JS逻辑

选择以下两种方式之一即可：

方式1：事件委托（推荐，更高效）

通过父元素统一处理点击事件，无需逐个绑定：

// 替换为实际包含三个导航项的父级列表选择器
document.querySelector('.nav-list').addEventListener('click', function(e) {
  const dropdownItem = e.target.closest('.dropdown');
  if (dropdownItem) {
    dropdownItem.querySelector('.dropdown-menu').classList.toggle('active');
  }
});

方式2：保留原ID绑定逻辑，修改openMenu函数

利用this关键字获取当前点击的导航项，再找到其内部的下拉菜单：

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

function openMenu() {
  this.querySelector('.dropdown-menu').classList.toggle('active');
}

效果说明 #

修正后，点击每个导航项都会切换其对应的下拉菜单显示状态，实现了函数复用和正确的关联逻辑。

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