移动端汉堡菜单页面加载时短暂打开故障排查求助

• 该故障属于典型的JS执行延迟导致的样式闪烁问题，和aria-expanded属性配置无关：你已经在HTML里给按钮默认设置了aria-expanded="false"，该属性仅为无障碍标识，本身不控制菜单的显示隐藏，菜单的显隐完全由.toggled类对应的CSS规则控制。
• 核心问题是你的CSS没有给移动端场景下的菜单设置默认隐藏规则，仅定义了.toggled类触发的展开样式：你的交互JS需要等DOM解析完成、JS文件加载执行后，才会初始化菜单状态，在JS生效前的空白窗口内，菜单会保持默认的展开状态，等JS执行完成才会隐藏，就出现了短暂打开的现象。
• 如果你把JS放在页面底部、或者站点存在JS加载阻塞的情况，这个闪烁的现象会更明显。

• 优先通过CSS实现默认隐藏，不依赖JS初始化，从根源解决闪烁问题，参考样式如下：

/* 适配你代码里的移动端断点992px */
@media (max-width: 991px) {
  .main-navigation .nav-menu {
    display: none;
    /* 如果你用的是高度/位移动画，就把默认值设为height:0/transform:translateX(100%)等隐藏状态 */
  }
  .main-navigation.toggled .nav-menu {
    display: block;
    /* 原有展开的样式规则保持不变即可 */
  }
}

• 如需兼容禁用JS的用户，可在页面头部补充noscript标签兜底：

<noscript>
<style>
@media (max-width: 991px) {
  .main-navigation .nav-menu {
    display: block;
  }
}
</style>
</noscript>

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