Jquery addClass到wp_nav_menu的速度非常慢

Question

我用下面的简单代码向我的wp_nav_menu添加了一个li类

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

当你访问我的网站http://annalidesign.com时，Wordpress首先会生成没有liparent类的原始导航菜单(垂直)，然后在几毫秒之后，Jquery代码会运行并添加到"liparent“类上，使它像我想要的那样水平。

问题是，在添加新的liparent类之前，我可以立即看到导航的外观。我能做些什么来避免这种情况发生吗？我尝试将Jquery脚本粘贴到导航栏的HTML后面，但原来的垂直导航栏仍然显示了一毫秒之前的间隔。

我尝试过使用walker函数，使用下面的代码没有任何幸运，因为我不知道如何将类添加到Wordpress生成的现有li元素中。我的代码删除了Wordpress生成的所有li类，并且只添加了一个类。这不是我想要的。

  class MyWalker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth) {
     $indent = str_repeat("\t", $depth);
     $output .= "\n$indent<ul class=\"sub-menu\">\n";
   }

function start_el(&$output, $item, $depth, $args) {

       if($depth == 0) {
          $class_names = ' class="liparent"';
       }

       $output .= $indent . '<li' . $class_names . '>';
    }
}

Answer 1

您可以先隐藏菜单，然后在addClass函数运行后使用jQuery显示它。下面是一个精简的测试用例，它在jQuery运行Codepen：http://codepen.io/SteveClason/pen/eZqBrw之前使用setTimeout模拟页面加载：

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 );