jQuery菜单切换异常：无法按预期关闭菜单

看起来你是只给点击事件写了「显示菜单」的逻辑，没做状态切换判断，所以第二次点击只会重复执行显示操作，自然不会隐藏～先帮你梳理下问题和解决方案：

先修正HTML里的小问题 #

你的第二个<a>标签写了id="showmenu2"但文本是Show menu 1，如果它也是用来控制menu1的话，这个命名会搞混逻辑，建议先把元素标识理清楚，比如改成「Toggle Menu」明确功能：

<p><a id="toggleMenu1" href="#">Toggle Menu 1</a></p>
<!-- 如果第二个链接是控制另一个菜单，文本对应改过来 -->
<p><a id="toggleMenu2" href="#">Toggle Menu 2</a></p>

<div id="menu1" class="topmenus">
  <div class="mystyle">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
    </ul>
  </div>
</div>

<div id="menu2" class="topmenus">
  <div class="mystyle">
    <ul>
      <li>Item A</li>
      <li>Item B</li>
    </ul>
  </div>
</div>

核心解决方案：用CSS类切换实现显示/隐藏 #

这种方式把样式和逻辑解耦，是最推荐的写法：

第一步：设置CSS默认隐藏菜单

/* 默认隐藏所有菜单 */
.topmenus {
  display: none;
}
/* 添加show类时显示菜单 */
.topmenus.show {
  display: block;
}

第二步：写JS切换逻辑

通过classList.toggle()方法，自动判断当前是否有show类，有就移除（隐藏），没有就添加（显示）：

// 绑定第一个菜单的切换事件
const toggleBtn1 = document.getElementById('toggleMenu1');
const menu1 = document.getElementById('menu1');

toggleBtn1.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  // 切换菜单的显示状态
  menu1.classList.toggle('show');
  // 顺便切换按钮文本，让用户更清楚当前操作
  this.textContent = menu1.classList.contains('show') ? 'Hide Menu 1' : 'Show Menu 1';
});

// 第二个菜单同理
const toggleBtn2 = document.getElementById('toggleMenu2');
const menu2 = document.getElementById('menu2');

toggleBtn2.addEventListener('click', function(e) {
  e.preventDefault();
  menu2.classList.toggle('show');
  this.textContent = menu2.classList.contains('show') ? 'Hide Menu 2' : 'Show Menu 2';
});

为什么你之前的代码不行？ #

如果你的原始JS只是写了类似menu1.style.display = 'block'的代码，那每次点击都会强制把菜单设为显示状态，完全没考虑它当前是不是已经显示了。而上面的方法会先判断菜单的当前状态，再执行对应的显示/隐藏操作，自然就能实现点击切换的效果啦～

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