页面刷新后如何保留添加的CSS类？WordPress侧边菜单技术问题

你猜的没错，就是要用localStorage来持久化菜单状态，这样刷新页面后就能恢复之前的展开/折叠状态。下面是修改后的代码，我把你两个分开的document.ready合并了，同时加入了状态存储和恢复的逻辑：

jQuery(document).ready(function ($) {
    // 页面加载时恢复菜单状态
    const isSidebarActive = localStorage.getItem('sidebarActive') === 'true';
    if (isSidebarActive) {
        $(".sidemenu-trigger").addClass("active");
        $(".grid-parent").addClass("collapsed-menu");
    } else {
        $(".sidemenu-trigger").removeClass("active");
        $(".grid-parent").removeClass("collapsed-menu");
    }

    // 点击触发器切换状态并存储
    $(".sidemenu-trigger").on("click", function (e) {
        const hasActiveClass = $(".sidemenu-trigger").hasClass("active");
        if (!hasActiveClass) {
            $(".sidemenu-trigger").addClass("active").css({ x: "x" });
            $(".grid-parent").addClass("collapsed-menu").css({ x: "x" });
            localStorage.setItem('sidebarActive', 'true');
        } else {
            $(".sidemenu-trigger").removeClass("active").css({ x: "x" });
            $(".grid-parent").removeClass("collapsed-menu").css({ x: "x" });
            localStorage.setItem('sidebarActive', 'false');
        }
    });
});

代码说明： #

• 页面初始化时，从localStorage读取sidebarActive的值，判断之前菜单是激活还是折叠状态，然后给对应元素加上或移除类
• 点击触发器时，不仅切换类，还把当前状态存入localStorage，确保刷新后能读取到
• 你原来的.css({x:"x"})应该是动画相关的样式占位符，保留即可，替换成你实际的CSS属性就行

另外要注意，如果用户清除浏览器缓存或使用隐私模式，localStorage里的状态会被清空，这是正常的浏览器行为，没法避免。

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