如何在关闭下拉菜单时移除<div>的.active类？（jQuery）

你的问题出在第二个.name的点击事件逻辑上：不管下拉菜单是展开还是收起，只要点击.name就会先移除所有.active类，再给当前元素强制加上.active，完全没考虑菜单的状态。所以即便是点击同一个.name关闭菜单，它依然会被加上.active，导致蓝色背景不会消失。

修正后的JS代码 #

$(".name").click(function() {
  const $submenu = $(this).next(".submenu");
  // 获取菜单当前的可见状态
  const isSubmenuVisible = $submenu.is(":visible");
  
  // 先移除所有.name的active类
  $(".name").removeClass("active");
  
  // 切换菜单的显示/隐藏
  $submenu.slideToggle();
  
  // 只有菜单从隐藏变为显示时，才给当前.name加active
  if (!isSubmenuVisible) {
    $(this).addClass("active");
  }

  // 可选优化：切换展开/收起图标，提升交互直观性
  $(this).find("span").text(isSubmenuVisible ? "➕" : "➖");
});

$(".submenu li").click(function(){
  $("li").removeClass("active2");
  $(this).addClass("active2");
});

关键修改说明 #

• 合并了两个独立的.name点击事件，避免重复绑定引发的逻辑冲突
• 新增菜单状态判断：根据菜单当前是否可见，决定是否给.name添加.active类
  • 菜单隐藏时点击：展开菜单 + 给当前.name加蓝色背景
  • 菜单显示时点击：收起菜单 + 移除当前.name的蓝色背景

现在点击同一个.name时，菜单收起后会自动恢复原本的深灰色背景，符合你想要的效果。

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