点击切换导航子菜单问题：同一Li重复点击无法关闭的修复需求

问题说明 #

当前导航菜单存在两个交互问题：

• 点击带sub类的列表项，子菜单能正常显示，但再次点击无法隐藏
• 点击其他sub类列表项时，之前打开的子菜单会关闭，但当前项的子菜单能正常显示

需要实现的目标交互：

• 点击sub类列表项，切换其对应子菜单的显示/隐藏状态
• 点击其他sub类列表项时，关闭所有已打开的子菜单，再显示当前项的子菜单

问题原因 #

原代码中，每次点击都会先移除所有sub项的active类，之后再判断当前项是否有active类——此时当前项的active已经被移除，判断结果永远为false，导致只能添加active，无法触发移除操作。

修正后的代码 #

HTML（无需修改） #

<ul class="navbar">
  <li>
    <a href="#">Home</a>
  </li>
  <li class="sub">
    <a href="#">Info</a>
    <ul class="sub-menu">
      <li><a href="#">Info 1</a></li>
      <li><a href="#">Info 2</a></li>
    </ul>
  </li>
  <li class="sub">
    <a href="#">image</a>
    <ul class="sub-menu">
      <li><a href="#">img 1</a></li>
      <li><a href="#">img 2</a></li>
    </ul>
  </li>
</ul>

CSS（无需修改） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 10px;
  background: red;
}

.sub {
  position: relative;
}

.sub .sub-menu {
  position: absolute;
  top: 39px;
  left: 0;
  width: 100px;
  display: none;
}

.sub .sub-menu li {
  margin: 10px 0;
}

.sub.active .sub-menu {
  display: block;
}

JavaScript（修正逻辑） #

let menuLi = document.querySelectorAll('.sub');

menuLi.forEach((li) => {
  li.addEventListener('click', () => {
    // 先记录当前项的active状态，避免后续操作影响判断
    const isActive = li.classList.contains('active');
    
    // 移除所有sub项的active类，关闭其他子菜单
    menuLi.forEach(item => item.classList.remove('active'));
    
    // 根据之前的状态决定是否添加当前项的active类
    if (!isActive) {
      li.classList.add('active');
    }
  })
});

逻辑说明 #

1. 点击时先保存当前列表项的active状态，避免后续移除操作干扰判断
2. 移除所有sub类列表项的active类，确保其他子菜单全部关闭
3. 如果当前项原本没有active类，则添加该类显示子菜单；如果原本有，则保持移除状态（实现隐藏）

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