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 显示它。这是一个精简的测试用例，它使用 setTimeout 在 jQuery 运行 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 );