Jquery将类添加到wp_nav_菜单的速度非常慢

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

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

当您访问我的站点时，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 . '>';
    }
}

MyWalker类扩展了Walker\u导航菜单{ 函数启动（和$output，$depth）{ $indent=str\u repeat（“\t”，$depth）； $output.=“\n$indent

\n”； } 函数开始（&$output、$item、$depth、$args）{ 如果（$depth==0）{ $class_names='class=“liparent”'； } $output.=$indent.'； } }

---

您可以先隐藏菜单，然后在addClass函数运行后使用jQuery显示它。下面是一个精简的测试用例，它使用setTimeout在jQuery运行Codepen:）之前模拟页面加载：
HTML
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 );

---

我认为您需要从头重写现有的walker，或者找到原始walker所在的位置并修改它（如果您使用的是主题），我已经尝试过了。在jQuery之前的head中添加了CSS。但是它只是隐藏了导航..我也试着先隐藏导航，然后添加类，然后显示它<代码>$（'#菜单navigasjon'）。隐藏（）$（#menu navigasjon'）。children（'li'）。addClass（'liparent'）$（“#菜单navigasjon”）.show（）没有任何运气。您评论中的第二个解决方案也会有相同的闪烁，因为首先页面将加载未更改的菜单navigasjon，然后在页面加载后，jQuery将隐藏它，添加类，然后显示它——基本上与您现在拥有的内容相同。但是我不明白为什么在addClass不起作用之后，用css隐藏nav，然后用JS显示它。我在上面的url上看不到这个问题--你把它修好了吗？

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

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