如何实现选中菜单项时关闭导航栏下拉菜单

问题分析 #

你当前的代码存在两个关键问题：

• 选择器错误：HTML中下拉菜单的ul标签类为dd ul（即两个类名：dd和ul），但你的JS选择器用的是.dd ul，这是查找.dd元素下的所有ul，而非目标下拉菜单容器。
• 事件触发逻辑缺失：仅监听document点击不足以确保点击菜单项时触发关闭，需要直接给菜单项绑定点击事件。

修复后的代码 #

HTML（无需修改结构，确保类名正确即可）

<table width="1000" border="0" align="center">
  <tbody>
    <tr>
      <td>
        <div class="navbar">
          <ul class="dd">
            <li>
              <div class="dd__item"><a href="#Modules"> Modules &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp </a></div>
              <ul class="dd ul">
                <li>
                  <div class="dd__item"> <a href="#A1">Algebra</a></div>
                  <ul>
                    <li><a href="#A4">Level 4 (about Year 10)</a>
                    <li><a href="#A5">Level&nbsp5&nbsp(about&nbspYear&nbsp10)</a>
                    <li><a href="#A6">Level 6 (Years 11-12)</a></li>
                  </ul>
                </li>
                <li><a href="#SMA">Arithmetic</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript（修正选择器+绑定菜单项点击事件）

// 关闭所有下拉菜单的核心函数
function closeAllDropdowns() {
  // 修正选择器：精准匹配同时拥有dd和ul类的下拉容器
  const allDropdowns = document.querySelectorAll("ul.dd.ul");
  allDropdowns.forEach(dropdown => {
    dropdown.classList.remove("show");
  });
}

// 给所有导航链接绑定点击事件，点击时立即关闭下拉
document.querySelectorAll(".navbar a").forEach(link => {
  link.addEventListener("click", closeAllDropdowns);
});

// 点击页面其他区域也触发下拉关闭
document.documentElement.addEventListener("click", closeAllDropdowns);

// 可选：阻止下拉菜单内部点击事件冒泡，避免和下拉打开逻辑冲突
document.querySelectorAll(".dd ul").forEach(dropdown => {
  dropdown.addEventListener("click", e => {
    e.stopPropagation();
  });
});

关键说明 #

• 修正后的选择器ul.dd.ul能精准定位到你的下拉菜单容器，确保正确移除show类来关闭菜单。
• 给所有导航链接绑定点击事件，确保点击任何一级/二级菜单项时都能立即触发关闭。
• 可选的阻止冒泡逻辑：如果你的下拉菜单是通过点击父项（比如"Modules"）打开的，这段代码可以避免点击下拉内部元素时误触发document的关闭事件。

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