Question

我有一个带有Twenty Eleven Child Theme的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

Answer 1

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

关于闪烁菜单的问题，您应该在CSS中将子菜单设置为display: none;。看一下这个插件，它正在将它（子菜单）设置为display: none;，但是在加载DOM之后它才会触发（在页面开始加载后会在很短的时间内启动，但足以看到它“ flash“），因此通过在CSS中将其设置为display: none;，它将加载隐藏，并在悬停时打开。

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

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

Answer 2

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

jQuery Vertical mega菜单子菜单在加载时闪烁。如何阻止它在wordpress中闪烁

2 个答案: