使用jQuery切换导航菜单子菜单未达预期：点击新菜单旧子菜单未关闭

问题说明 #

使用CSS、HTML和jQuery实现的水平导航菜单，点击菜单项可展开对应子菜单，但存在问题：当已有子菜单处于展开状态时，点击另一个菜单项，新子菜单正常显示，之前展开的子菜单不会自动关闭。

解决方案思路 #

点击菜单项时，先移除所有子菜单的激活类，再对当前点击项的子菜单进行切换操作；若需要支持点击当前菜单项关闭自身子菜单，需额外判断当前子菜单的激活状态。

修改后的代码 #

jQuery核心代码 #

$(".menus_li").click(function(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 获取当前点击项的子菜单
  const currentSubmenu = $(".blocks_ul", this);
  // 移除所有其他子菜单的激活类
  $(".blocks_ul").not(currentSubmenu).removeClass('submenu-is-active');
  // 切换当前子菜单的激活状态
  currentSubmenu.toggleClass('submenu-is-active');
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bg_submenu"></div>
<ul class="top-menu">
  <li class="menus_li"><a href="#">Cars +</a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Mercedes</a></li>
      <li><a class="menu-link" href="#">Jeep</a></li>
      <li><a class="menu-link" href="#">Ford</a></li>
      <li><a class="menu-link" href="#">BMW</a></li>
      <li><a class="menu-link" href="#">Tesla</a></li>
    </ul>
  </li>
  <li class="menus_li"><a href="#">Computers +</a>
    <ul class="blocks_ul">
      <li><a class="menu-link" href="#">Apple</a></li>
      <li><a class="menu-link" href="#">Lenovo</a></li>
      <li><a class="menu-link" href="#">HP</a></li>
      <li><a class="menu-link" href="#">Dell</a></li>
      <li><a class="menu-link" href="#">Acer</a></li>
    </ul>
  </li>
</ul>

<style>
a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

.top-menu {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  background: #0088ff;
  padding: 1rem;
  margin: 0;
}

.menus_li {
  font-weight: bold;
  margin-left: 1rem;
  cursor: pointer;
}

.blocks_ul {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  min-width: 120px;
  border-radius: 8px;
  padding: 1rem;
}

.blocks_ul a {
  color: #000;
}

.blocks_ul li {
  padding: 0.4rem 0.7rem;
  font-weight: normal;
}

.blocks_ul.submenu-is-active {
  display: block;
}

.bg_submenu {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.bg_submenu.show {
  display: block;
}
</style>

可选优化：点击空白处关闭子菜单 #

若需要点击页面空白区域关闭所有子菜单，可补充以下代码：

$(".bg_submenu").click(function() {
  $(".blocks_ul").removeClass('submenu-is-active');
  $(this).removeClass('show');
});

$(".menus_li").click(function(e) {
  e.preventDefault();
  const currentSubmenu = $(".blocks_ul", this);
  $(".blocks_ul").not(currentSubmenu).removeClass('submenu-is-active');
  currentSubmenu.toggleClass('submenu-is-active');
  // 同步控制遮罩层的显示/隐藏
  $(".bg_submenu").toggleClass('show', currentSubmenu.hasClass('submenu-is-active'));
});

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