jQuery 垂直巨型菜单子菜单在加载时闪烁。如何阻止它在wordpress中闪烁答案

【问题标题】：jQuery Vertical mega menu sub menus flashing on load. How to stop it from flashing in wordpressjQuery 垂直巨型菜单子菜单在加载时闪烁。如何阻止它在wordpress中闪烁
【发布时间】：2013-12-11 08:38:53
【问题描述】：

我有一个带有 21 个儿童主题的 wordpress 网站。在我的侧边栏中，我从以下位置嵌入了一个 jQuery Vertical Mega Menu 小部件：

http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/

菜单运行良好。唯一的问题是，当网站加载时有一个短 FOUC（无样式内容的闪烁）。

http://en.wikipedia.org/wiki/Flash_of_unstyled_content

我不知道如何防止它闪烁。我阅读了一些带有解决方案的类似问题，但我不知道如何将其应用于我的子主题。

有人说你必须添加jQuery(document).ready(function() {。但是在哪里？我试图将它添加到我的子主题的functions.php中：

<?php 
....
.....


function id_scripts() {
   jQuery(document).ready(function() { echo 'test'});
}
add_action('wp_enqueue_scripts', 'id_scripts');

>

但它给了我一个解析错误：

解析错误：语法错误，意外的 T_FUNCTION，在第 28 行的 /..../functions.php 中需要 ')'

【问题讨论】：

你能提供链接吗？
lordbau.at/wordpress
你可以删除你添加的代码并恢复到以前的状态吗？
好的，我在 functions.php 中注释掉了 jQuery(document) 部分
现在它加载没有错误，与上面相同的链接

标签： jquery wordpress flash flicker fouc

【解决方案1】：

首先，您似乎正在将 JavaScript 添加到 PHP。这就是你有错误的原因。

关于闪烁菜单的问题，您应该在 CSS 中将子菜单设置为display: none;。查看插件，它将它（子菜单）设置为display: none;，但直到加载 DOM 后它才会触发（在页面开始加载后不久，但足以看到“flash” )，因此通过在 CSS 中将其设置为 display: none;，它将加载隐藏并在悬停时打开。

具体来说，通过查看链接中的插件，尝试将以下内容添加到您的 CSS：

.dcjq-vertical-mega-menu .sub-container {
    display: none;
}

【讨论】：

【解决方案2】：

作为 CWSpear 回答的后续行动，我建议为此目的创建一个自定义 CSS 类，您还可以将其应用于任何其他在被 JS 激活之前应该隐藏的元素。我喜欢将这个类命名为 .js-hide — Twitter Bootstrap 使用 .collapse。

【讨论】：