Question

我已经使用以下简单代码

为我的wp_nav_menu添加了一个li类

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

当您访问我的网站http://annalidesign.com时，Wordpress将首先生成没有唇形类的原始导航菜单（垂直），然后在Jquery代码运行之后分裂毫秒，并在“liparent”类上添加它我希望水平。

问题是我可以在添加新的liparent类之前看到导航看起来是如何瞬间。有什么办法可以避免这种情况发生吗？我试图在导航栏的HTML之后粘贴Jquery脚本，但原始垂直导航栏之前仍显示分裂毫秒。

我尝试过使用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之前使用setTimeout来模拟页面加载：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 );

Jquery addClass到wp_nav_menu非常慢

1 个答案: