jQuery Mega 菜单闪烁问题

Question

我想知道是否有人能够阐明我遇到的问题...

我在以下网站使用了 jQuery Mega 菜单脚本：

http://www.furnituremind.co.uk/

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

http://designchemical.com/lab/jquery-mega-drop- down-menu-plugin/examples/

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

http://img838.imageshack.us/img838/4421/screenshot20111221at193.png

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

非常感谢帮助！

Answer 1

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

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

Answer 2

chobo2 是正确的。

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

main-mega li ul, #nav-main-mega .sub {display: none;}

main-mega .sub ul {显示：块；}

Answer 3

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

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

Answer 4

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

.megamenu li > div {display: none}

Answer 5

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

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

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

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

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

Answer 6

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

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