我正在使用自定义主题重新设计我们的网站。然而，我遇到了一个问题，在菜单中快速折叠父选项下的链接之前，菜单会跳转并显示所有链接。

以下是临时站点：http://volocommerce.staging.wpengine.com/

然而，这是我正在使用的代码：

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

下面是移动菜单/滚动菜单的脚本：

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

我试图阻止的是，每次加载页面时都会发生这种情况，这非常令人沮丧：

此后，我尝试使用jQuery隐藏页面加载上的元素，然后在页面加载完成后删除隐藏类-这也失败了：（

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

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

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

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