jQuery Вертикальное подменю мегаменю мигает при загрузке. Как остановить его от перепрошивки в WordPress

Question

У меня есть WordPress веб-сайт на тему "Двадцать одиннадцать детей". В боковую панель я встроил виджет вертикального мегаменю jQuery из:

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

Меню работает нормально. Единственная проблема заключается в том, что при загрузке веб-сайта происходит короткое FOUC (мигание неустановленного контента).

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

Я не знаю, как это предотвратить. Я прочитал несколько похожих вопросов с решениями, но я не могу понять, как применить его к моей детской теме.

Некоторые говорят, что вы должны добавить jQuery(document).ready(function() {, Но где? Я попытался добавить его в функции моей дочерней темы.

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


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

>

Но это дает мне ошибку разбора, говорящую:

Ошибка разбора: синтаксическая ошибка, неожиданный T_FUNCTION, ожидание ')' в /..../functions.php в строке 28

Answer 1

В качестве продолжения ответа CWSpear я бы порекомендовал создать для этой цели собственный класс CSS, который вы также можете применять к любым другим элементам, которые должны быть скрыты до активации JS. Мне нравится называть этот класс .js-hide - Twitter Bootstrap использует .collapse,

Answer 2

Во-первых, кажется, вы добавляете JavaScript в PHP. Вот почему у вас есть ошибка.

Что касается проблемы с мигающим меню, вы должны установить подменю display: none; в CSS. Глядя на плагин, он устанавливает его (подменю) display: none;, но он не срабатывает до тех пор, пока не загружена DOM (что происходит через короткое время после начала загрузки страницы, но достаточно, чтобы увидеть эту "вспышку"), поэтому, установив его в display: none; в CSS он будет загружен скрытым и откроется при наведении.

В частности, посмотрев на плагин в ссылке, попробуйте добавить следующее в свой CSS:

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