Question

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

以下是暂存网站： http://volocommerce.staging.wpengine.com/

但是，这是我使用的代码：

functionOfLargeMatrix2

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

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

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

我尝试添加这段代码（在页面加载之前使用Javascript隐藏元素，然后在页面加载后通过删除隐藏类使其可见）。

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

发现＆＃34; pagebeforeload＆＃34;在jQuery 1.4.0中被折旧，所以尝试了这个没有成功：

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

Answer 1

我花了一些时间改进网站上的代码 - 这就是问题所在：

删除

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

从标题的第55行开始，将其移至顶部 - 仍然不是100％，它仍然跳了一下......

查看javascript文件 - 看它是一个古老的版本，所以使用CDN版本（加载时间也更快）

添加

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

到＃34; header.php＆＃34;

的第3行

然后添加这个CSS＆amp; jQuery位于＆＃34; Header.php＆＃34;

的顶部

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

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

1 个答案: