如何判断jQuery的toggleClass方法是添加还是移除了类？

嘿，这个场景我之前做侧边栏交互的时候也碰到过，咱们来拆解一下你的问题：

情况1：你已经明确知道要添加还是移除类（使用toggleClass的第二个state参数） #

你现在写的逻辑其实完全没问题，根本不需要额外用hasClass()检查！

因为当你传入第二个布尔参数addOrRemove时，toggleClass()的行为是完全确定的：

• 当addOrRemove为true，一定会添加目标类
• 当addOrRemove为false，一定会移除目标类

所以直接用这个addOrRemove值去更新sessionStorage就好，多做一次hasClass()检查反而多余。你的原代码可以直接保留：

$el.toggleClass('sidebarCollapsed', addOrRemove); 
if (addOrRemove) { 
  sessionStorage.setItem("sidebarState", "collapsed"); 
} else { 
  sessionStorage.setItem("sidebarState", "expanded"); 
}

情况2：你需要自动切换类（不传入state参数，让toggleClass自行判断） #

这时候toggleClass()会根据元素当前的类状态自动切换，但它的返回值是jQuery对象本身，不会告诉你到底是加了还是删了类。这时候就必须借助hasClass()来判断最终状态，有两种常见写法：

写法一：先记录初始状态，再反推最终结果

// 先记录当前是否有目标类
const wasCollapsed = $el.hasClass('sidebarCollapsed');
// 执行切换操作
$el.toggleClass('sidebarCollapsed');
// 初始状态是折叠的，切换后就是展开的，反之亦然
const newState = wasCollapsed ? 'expanded' : 'collapsed';
sessionStorage.setItem("sidebarState", newState);

写法二：执行切换后，直接检查最终状态

$el.toggleClass('sidebarCollapsed');
// 直接判断切换后的元素状态
const newState = $el.hasClass('sidebarCollapsed') ? 'collapsed' : 'expanded';
sessionStorage.setItem("sidebarState", newState);

这两种写法都能达到目的，看你个人习惯选择就行。

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