为什么此导航菜单闪烁？

Question

我已经尝试调试这个问题很长时间了，所以我想我可以提出一些想法/得到一些方向来了解为什么会发生这种情况......

一旦页面加载并将鼠标悬停在下拉菜单上，下拉菜单启动时就会闪烁。有什么线索说明为什么吗？提前谢谢！！！

Answer 1

我最近遇到了同样的问题。我在网上找不到解决方案，但通过反复试验，我找到了解决方案。在这里分享解决方案，以防对其他人有帮助。

第1步：

打开custom.css。 在文件末尾添加以下 CSS 代码：

@media only screen and (min-width: 1200px) {
  /* Hide the menu by default */
  .menu {
    display: none; /* Prevent flashing */
    visibility: hidden; /* Optional for added stability */
  }

  /* Show the menu when the page has loaded */
  .menu-loaded .menu {
    display: block;
    visibility: visible;
  }
}

注：

将 .menu 更改为菜单的类名称。 我使用了@media，因为闪烁只发生在我的桌面版本中，如果需要，您可以将其删除。

第2步：

在您的 Shopify 主题中，打开 theme.liquid 文件。 在结束标记之前添加以下脚本：

<script>
  document.addEventListener('DOMContentLoaded', function () {
     document.body.classList.add('menu-loaded');
  });
</script>

你就完成了...