添加条件后修改伪元素类的JQuery代码失效，请求排查

核心错误点 #

• 无效的条件判断：$(this).not(this) 是逻辑错误——$(this) 就是当前点击的DOM元素的jQuery包装对象，.not(this) 会把当前元素从集合中移除，得到空jQuery对象，调用hasClass永远返回false，导致这个else if分支永远不会执行。
• 逻辑分支混乱：添加大括号后，原本不受条件控制的$(this).addClass('dropdownlink--active')被包裹进永远不会触发的分支里，导致点击后无法给当前元素添加激活类。
• 初始判断逻辑脱节：$('.dropdownlink').hasClass('dropdownlink--active') 判断的是所有下拉链接中是否至少有一个激活，但后续分支没有和这个判断形成连贯逻辑链。

修复后的代码 #

针对「点击切换下拉菜单激活状态，同时关闭其他已激活菜单」的需求，修正后的代码如下：

$('.dropdownlink').on('click', function (e) {
    e.preventDefault();
    const $current = $(this);
    const isCurrentActive = $current.hasClass('dropdownlink--active');
    const hasActiveSiblings = $('.dropdownlink').not($current).hasClass('dropdownlink--active');

    // 当前元素已激活，直接移除激活类
    if (isCurrentActive) {
        $current.removeClass('dropdownlink--active');
    } else {
        // 存在其他激活元素时，先统一移除所有激活类
        if (hasActiveSiblings) {
            $('.dropdownlink').removeClass('dropdownlink--active');
        }
        // 给当前元素添加激活类
        $current.addClass('dropdownlink--active');
    }
});

逻辑说明 #

1. 缓存当前点击元素$current，减少重复DOM查询，提升性能。
2. 拆分两个关键状态判断：当前元素是否激活、是否有其他元素激活。
3. 逻辑分支清晰：点击已激活元素则关闭；点击未激活元素则先关闭其他激活项，再激活当前项。

更简洁的可选写法 #

如果需求是「点击切换自身激活状态，同时自动关闭其他所有激活菜单」，可以简化为：

$('.dropdownlink').on('click', function (e) {
    e.preventDefault();
    const $current = $(this);
    // 移除所有其他元素的激活类
    $('.dropdownlink').not($current).removeClass('dropdownlink--active');
    // 切换当前元素的激活状态
    $current.toggleClass('dropdownlink--active');
});

这个写法用toggleClass直接切换当前元素状态，同时确保其他元素处于未激活状态，逻辑更简洁高效。

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