WordPress菜单在页面加载时跳转，当通过PHP调用它时

Question

I'm using a Custom Theme to re-design our website. However, I'm getting an issue where the Menu jumps around and shows all links, before quickly collapsing them under the parent options, in the menu.

Here is the staging site: http://volocommerce.staging.wpengine.com/

However, this is the code I'm using:

            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar bar-1"></span>
                    <span class="icon-bar bar-2"></span>
                    <span class="icon-bar bar-3"></span>
                  </button>
                </div>
                </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="navbar navbar-default navbar-fixed-top">
              <div class="container">

                <div id="" class="">
         <?php 
        //$walker = new Menu_With_Description;

         wp_nav_menu (array ('theme_location' => 'header_menu', 
                                  'container'       => 'div', 
                                  'container_class' => '', 
                                  'container_id'    => '',
                                  'menu_class'      => 'menu', 
                                  'menu_id'         => '',
                                  'echo'            => true,
                                  'fallback_cb'     => 'wp_page_menu',
                                  'before'          => '',
                                  'after'           => '',
                                  'link_before'     => '',
                                  'link_after'      => '',
                                  'items_wrap'      => '<ul class="nav navbar-nav top_items">%3$s</ul>',
                                  'depth'           => 0,
                                  //'walker'          => $walker,

  )); ?>
                </div>
            </div>

         </div>
         </div>

 </nav>

And here is the script for the mobile menu/scroll menu:

     <script>
  $(function(){
    $('.navbar ul li:has(ul)').addClass('dropdown');
    $('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul:has(li)').addClass('dropdown-menu');
    $('.navbar ul li ul li:has(div)').addClass('yamm-content');
    $('.navbar .lang_drop ul li ul:has(li)').addClass('single_drop');
    $('.navbar .lang_drop ul li:has(ul)').removeClass('');
//yamm-fw
    $('.dropdown:has(a)').addClass('dropdown-toggle');

    $('.more_menu').addClass('yamm-fw');

});


$(window).scroll(function(e){ 
  $el = $('.head_con'); 
  if ($(this).scrollTop() > 150 ){ 
    $('.head_con').addClass('head_con_scroll'); 
    $('.logo_con').addClass('logo_con_scroll'); 
    $('.menu-item').addClass('menu-item_scroll'); 
    $('.head_phone_con').addClass('head_phone_con_scroll'); 
    $('.head_call_us').addClass('head_call_us_scroll');
    $('.ceo_message').addClass('ceo_message_scroll');
  }
  if ($(this).scrollTop() < 150 )
  {
    $('.head_con').removeClass('head_con_scroll'); 
    $('.logo_con').removeClass('logo_con_scroll'); 
    $('.menu-item').removeClass('menu-item_scroll'); 
    $('.head_phone_con').removeClass('head_phone_con_scroll'); 
    $('.head_call_us').removeClass('head_call_us_scroll'); 
    $('.ceo_message').removeClass('ceo_message_scroll'); 
  } 
});
</script>

What I'm trying to stop occurring is this, which happens everytime the page is loading - and it's very frustrating:

I tried adding this bit of code (using Javascript to hide the element before the page loads, then make it visible by removing the hide class, once the page has loaded).

<script>
$(document).on("pagebeforeload",function(){
    $('.dropdown-menu').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.dropdown-menu').removeClass('hidden-element');
});
</script>
<style>
.hidden-element {display:none!important;}
</style>

Spotted that "pagebeforeload" was depreciated in jQuery 1.4.0 so tried this without success:

<script>
$(document).on("pagecontainerbeforeload",function(){
    $('.dropdown-menu').addClass('hidden-element');
});

$(document).on("pageload",function(){
    $('.dropdown-menu').removeClass('hidden-element');
});
</script>
<style>
.hidden-element {display:none!important;}
</style>

Answer 1

I spent some time improving the code on the site - this was the issue:

Remove

<script src="/wp-content/themes/volo/js/jquery.min.js" type="text/javascript"></script> 

from line 55 of the header, move it to the top - still wasn't 100% and it still jumped a bit...

Review the javascript file - see it was an ancient version so use the CDN version (quicker load times too)

Add

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 

to line 3 of "header.php"

Then add this bit of CSS & jQuery at the top of "Header.php"

<script>
$(document).on("pagecontainerbeforeload",function(){
$('.sub-menu').addClass('hidden-element');
$(document).on("pageload",function(){
$('.sub-menu').removeClass('hidden-element');
});
</script>
<style>
.hidden-element {display:none;}
</style>