JQuery addClass wp_nav_menu ist sehr langsam

Question

ich li class meine wp_nav_menu mit dem folgenden einfachen Code ohne

$('#menu-navigasjon').children('li').addClass('liparent'); 

Wenn Sie meine Website besuchen http://annalidesign.com, Wordpress wird zunächst erzeugen, um das ursprüngliche Navigationsmenü (vertikal) hinzugefügt habe liparent-Klasse, und eine Split-Millisekunde danach wird der Jquery-Code ausgeführt und addiert die "liparent" -Klasse, so dass es horizontal wie ich will.

Das Problem ist, dass ich sehe, wie die Navigation einen Bruchteil einer Sekunde aussieht, bevor die neue Liparent-Klasse hinzugefügt wird. Kann ich etwas tun, um dies zu vermeiden? Ich habe versucht, das Jquery-Skript direkt nach dem HTML für die Navigationsleiste einzufügen, aber die ursprüngliche vertikale Navigationsleiste zeigt immer noch eine halbe Millisekunde zuvor.

Ich habe versucht, mit Walker-Funktion, mit dem folgenden Code ohne Glück, weil ich nicht wissen, wie Sie Klassen zu dem vorhandenen li-Element, das Wordpress erzeugt, hinzufügen. Mein Code entfernt alle li-Klassen, die Wordpress generiert und fügt nur eine Klasse hinzu. Das ist nicht was ich will.

Answer 1

Sie könnten das Menü zunächst ausblenden und dann jQuery verwenden, um es anzuzeigen, sobald die Funktion addClass ausgeführt wurde. Hier ist eine abgespeckte Testfall, der setTimeout verwendet eine Seite geladen zu simulieren, bevor jQuery läuft Codepen: http://codepen.io/SteveClason/pen/eZqBrw):

HTML

<div class="nav"> 
    <div class="ulwrap"> 
    <p>This one doesn't blink.</p> 
    <ul id="menu-navigasjon"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
    <p>But this one does.</p> 
    <ul id="menu-navigasjon2"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
    </div> 
</div> 

CSS

.liparent { 
    color: red; 
} 
#menu-navigasjon { 
    display: none; 
} 

JavaScript

// This menu is initially hidden by CSS. 
$('#menu-navigasjon').children('li').addClass('liparent'); 
$('#menu-navigasjon').css('display', 'block'); 

// This menu initially displays then is altered by JavaScript. There's a timer to simulate a page loading. 
function blink() { 
    $('#menu-navigasjon2').children('li').addClass('liparent'); 
} 
setTimeout(blink, 1000);