jquery - jQuery Mega 菜单闪烁问题

Question

我想知道是否有人可以对我遇到的问题有所了解...

我为以下网站使用了 jQuery Mega Menu 脚本：

我从以下站点找到了脚本：

问题是在加载时，我可以看到文本以未格式化的方式快速闪烁，如下图所示：

我正在寻找解决此问题的方法，但不确定从哪里开始。我检查了开发者网站、评论和谷歌，但找不到解决方案。我想也许有一个将它放在一个临时隐藏的 Div 中，直到脚本被加载。

非常感谢您的帮助！

score 2 · Accepted Answer

我认为这个问题是因为 html 加载然后 jquery 插件运行。我在 ui 选项卡和 jquery 表单向导上看到了这种情况（例如：http ://thecodemine.org/ ）。

我不认为你可以让 jquery 比准备好文档更快地绑定。我建议的一件事是使用 css (display: none;) 隐藏这些子菜单，这样它们就会被隐藏并且你不会看到它们闪烁。

score 1 · Accepted Answer

chobo2 是正确的。

您可以使用初始化菜单时添加的巨型菜单类，然后在菜单形成后取消隐藏它们：

main-mega li ul，#nav-main-mega .sub {显示：无；}

score 1 · Accepted Answer

您可以在加载之前使用 CSS 隐藏子菜单：

#menu li ul {display: none;}
#menu .sub ul {display: block;}

score 0 · Accepted Answer

我遇到了同样的问题。我通过将其添加为有关大型菜单的任何 CSS 的第一行来获得菜单以停止闪烁：

.megamenu li > div {display: none}

score 0 · Accepted Answer

将此作为第一行添加到您用于大型菜单的 CSS 文件中：

.mega-menu li > div {display: none}

然后添加一些 jQuery 以在文档就绪时再次显示该项目：

$(document).ready(function () {
    $('.mega-menu li > div').css('display', 'block');
});

这将消除闪烁。我在这里尝试了每一个解决方案，没有一个对我有用 100%。这在 IE11 中是这样的。

score -1 · Accepted Answer

在菜单 CSS 的第一行，您必须使用以下几行：-

#menu li ul {display: none;}
#menu .sub ul {display: block;}