jQuery로드시 수직 메가 메뉴 하위 메뉴가 깜박입니다. Wordpress에서 깜박이는 것을 멈추는 방법

Question

나는 Twenty Eleven Child Theme가있는 WordPress 웹 사이트를 가지고 있습니다. 메뉴는 잘 작동

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

: 내 사이드 ​​바에서 나는에서 jQuery를 수직 메가 메뉴 위젯을 내장했습니다. 유일한 문제는 웹 사이트가로드 될 때 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'); 

> 

하지만 말을 나에게 구문 분석 오류를 제공합니다 :

Parse error: syntax error, unexpected T_FUNCTION, expecting ')' in /..../functions.php on line 28

Answer 1

첫째, 당신이 PHP 자바 스크립트를 추가하고 나타납니다. 그래서 당신은 오류가 있습니다.

깜박이는 메뉴의 문제에 대해서는 CSS의 하위 메뉴를 display: none;으로 설정해야합니다. 플러그인을 보면, 하위 메뉴가 display: none;으로 설정되어 있지만 DOM이로드 될 때까지 (페이지가로드되기 시작한 후 얼마 지나지 않아 "플래시"를 볼 수있을 때까지) 실행되지 않습니다. 그래서 그것을 CSS의 display: none;으로 설정하면, 숨김으로로드되고 덮어 씌울 때 열립니다.

특히, 링크 플러그인을보고, 당신의 CSS에 다음을 추가하십시오 : 나는이 목적을 위해 사용자 정의 CSS 클래스를 만드는 것이 좋습니다, CWSpear의 대답에 후속으로

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

Answer 2

당신을 JS에 의해 활성화 될 때까지 숨겨 져야하는 다른 요소에도 적용될 수 있습니다. 이 클래스의 이름을 .js-hide - Twitter Bootstrap은 .collapse으로 지정합니다.