求助：如何实现菜单元素的自身/目标元素Active类切换（支持点击已激活分类收起）

嘿，我来帮你搞定这个菜单的active切换问题～你的代码现在能实现切换到新分类时的激活状态，但缺少了判断当前元素是否已经激活的逻辑，所以点击已展开的分类时没法收起。其实根本不需要找什么$(this).self或者$(this).target，$(this)本身就代表当前被点击的那个li元素，咱们只要加个状态判断就行！

问题分析 #

你原来的代码逻辑是：只要点击li，就给它和子元素加active，同时移除兄弟元素的active。但没有考虑“当前元素已经是active状态”的情况，所以点击它的时候只会重复执行加active的操作，不会触发收起。

修改后的代码 #

咱们把逻辑拆成两种情况，让流程更清晰：

$(".menu li").click(function(){ 
  const $currentItem = $(this);
  
  // 第一步：判断当前点击的菜单是否已经处于激活状态
  if ($currentItem.hasClass('active')) {
    // 如果已经激活，就移除自身和子元素的active类（实现收起）
    $currentItem.removeClass('active');
    $currentItem.children().removeClass('active');
  } else {
    // 如果没激活，先清空所有兄弟菜单及其子元素的active状态
    $currentItem.siblings().removeClass('active').children().removeClass('active');
    // 再给当前菜单和它的子元素加上active类（实现展开激活）
    $currentItem.addClass('active');
    $currentItem.children().addClass('active');
  }
});

代码解释 #

1. 用const $currentItem = $(this)把当前点击的元素存起来，避免重复调用$(this)，代码可读性更高；
2. 核心判断：hasClass('active')直接检查当前元素是否处于激活状态，这是实现“点击自身切换状态”的关键；
3. 分支逻辑：已经激活就移除active（收起），未激活就先清除其他菜单的激活状态，再给当前菜单加active（切换激活）。

这样修改后，不管是点击新分类切换激活，还是点击已激活的分类收起，都能正常工作啦～

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