Javascript 在加载元素之前更改CSS

目标：我有一个主导航栏，单击时打开（使用jquery和css样式

--active

）。如果用户保持打开状态并导航到站点上的新页面，则导航栏需要保持打开状态，而不会首先显示为关闭状态

问题：导航栏确实保持打开状态（使用cookie来记住其状态），但在采用

--active

类之前，会以默认样式（即关闭）短暂显示导航栏。看起来很笨重，像一个快速闪光

有人能想出一种方法让导航栏在页面之间记住它的状态，并且（当cookie被“打开”时）采用

--active

类样式而不显示默认样式吗

（我已经看过了，但它对我不起作用）

$（文档）.ready（函数（）{
常量菜单按钮=$（'.header_u菜单按钮'）；
const menuState=Cookies.get（'menuState'）；
如果（menuState==“已打开”）{
menuButton.addClass（'--active'）；
};
菜单按钮。在（'单击'，函数（）上）{
$（this.toggleClass（'--active'）；
if（menuButton.hasClass（'--active'））{
Cookies.set（'menuState'，'opened'）；
}否则{
Cookies.set（'menuState'，'closed'）；
}
});
});

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景色：#DCDC；
}
.标题{
高度：110px；
背景色：#添加8e6；
}
.header__按钮-容器{
显示器：flex；
证明内容：柔性端；
}
.标题菜单按钮{
最小宽度：100px；
高度：110px；
背景色：#fff；
颜色：#000；
}
menuTransition先生{
过渡：所有1都易于输入输出；
}
.header__菜单按钮。--激活{
最小宽度：250px；
背景色：#000；
颜色：#fff；
}

---

如果在新页面中，菜单是

--活动的

请在

$（文档）之前使用此代码。就绪（函数（）

此代码将从导航栏中删除

--active

类！然后再查看页面

$（文档）.ready（函数（）{
$（“button.header\uuuu菜单按钮”）。单击（函数（）{
$（this.toggleClass（“--active”）；
})
})；

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景色：#DCDC；
}
.标题{
高度：110px；
背景色：#添加8e6；
}
.header__按钮-容器{
显示器：flex；
证明内容：柔性端；
}
.标题菜单按钮{
最小宽度：100px；
高度：110px；
背景色：#fff；
颜色：#000；
}
menuTransition先生{
过渡：所有1都易于输入输出；
}
.header__菜单按钮。--激活{
最小宽度：250px；
背景色：#000；
颜色：#fff；
}

导航栏确实保持打开状态，但会以默认样式短暂显示（即关闭）在采用--active类之前。看起来很笨重，就像快速闪现一样。

对此您完全无能为力。页面将以默认状态加载，直到DOM准备就绪并且JS运行以再次打开导航栏。唯一的修复方法是读取服务器上的cookie状态并在那里打开导航栏，或者更改y我们的站点将使用单页应用程序模式，但这不是一个快速解决方案。它需要从头开始重新设计整个站点结构。如果不希望出现“flash”，则需要读取带有服务器端代码的cookie，并以这种方式应用类（在构建页面时）-否则，js将始终等待dom加载元素后才会生效。如果您无法在服务器端执行此操作，则只能尝试在客户端更早地执行此操作：将使菜单显示为“打开”的类进一步向上移动到dom树中的

html

元素（在CSS规则中使用它，这些规则适当地使用子代选择器来相应地设置菜单和按钮的格式），并将JS代码从

文档中取出。ready

，并尽快将其应用。您似乎完全误解了这个问题，以及为什么这个问题不起作用。您为什么要更改我的答案！！！我说在$（文档）ready（函数（）之前使用此代码$（“button.header\u menu-button”）.removeClass（--active！！！我修复了格式和语法。我建议您从现在开始准确地执行此操作，以避免答案不明确。还请注意，在document.ready fires之前调用任何操作都不会起作用。无论出现任何错误，此答案仍然与问题无关。我建议将其删除。

$("button.header__menu-button").removeClass("--active");