如何在WordPress中保存toggleClass实现的侧边栏展开/收起状态？

你可以通过以下方式实现状态持久化，核心是在页面加载时读取localStorage的保存状态，点击时更新状态并同步到localStorage：

方案一：使用toggleClass（推荐，保留CSS样式控制灵活性） #

jQuery(document).ready(function(){
  // 从localStorage读取状态，默认未隐藏（false）
  let isSidebarHidden = localStorage.getItem('sidebarHidden') === 'true';
  
  // 页面初始化时，根据保存状态设置DOM
  if (isSidebarHidden) {
    jQuery('#cita-absolute').addClass('hide');
    jQuery('.fa-caret-right').addClass('rotate');
  }
  
  // 点击事件处理
  jQuery(".fa-caret-right").click(function(){
    // 切换状态
    isSidebarHidden = !isSidebarHidden;
    // 同步更新DOM类
    jQuery('#cita-absolute').toggleClass("hide", isSidebarHidden);
    jQuery('.fa-caret-right').toggleClass("rotate", isSidebarHidden);
    // 保存最新状态到localStorage
    localStorage.setItem('sidebarHidden', isSidebarHidden);
  });   
});

关键说明： #

• localStorage存储的是字符串，所以需要用=== 'true'将读取值转为布尔判断
• 初始化阶段直接根据保存状态设置DOM，确保页面刷新后保留上次操作的状态
• 使用toggleClass的第二个布尔参数，精确控制类的添加/移除，避免状态不一致

方案二：使用hide/show替代toggleClass #

如果你更倾向于直接操作DOM显示状态，可以用以下代码：

jQuery(document).ready(function(){
  let isSidebarHidden = localStorage.getItem('sidebarHidden') === 'true';
  
  // 初始化DOM状态
  if (isSidebarHidden) {
    jQuery('#cita-absolute').hide();
    jQuery('.fa-caret-right').addClass('rotate');
  } else {
    jQuery('#cita-absolute').show();
    jQuery('.fa-caret-right').removeClass('rotate');
  }
  
  // 点击事件处理
  jQuery(".fa-caret-right").click(function(){
    isSidebarHidden = !isSidebarHidden;
    if (isSidebarHidden) {
      jQuery('#cita-absolute').hide();
      jQuery('.fa-caret-right').addClass('rotate');
    } else {
      jQuery('#cita-absolute').show();
      jQuery('.fa-caret-right').removeClass('rotate');
    }
    // 保存状态
    localStorage.setItem('sidebarHidden', isSidebarHidden);
  });   
});

内容的提问来源于stack exchange，提问作者Diego M.