web-dev-qa-db-ja.com

PHPから呼び出すとメニューがジャンプする

私たちのウェブサイトを再デザインするためにカスタムテーマを使っています。しかし、メニュー内の親オプションの下でリンクをすばやく折りたたむ前に、メニューがジャンプしてすべてのリンクが表示されるという問題が発生しています。

これがステージングサイトです： 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>

私がやめようとしているのはこれで、これはページがロードされるたびに起こります - そしてそれは非常にイライラするものです： Jumping Menu

私はそれ以来、ページ読み込み時に要素を非表示にするためにjQueryを使用しようとしました、そしてページ読み込みが完了したらhideクラスを削除します - これも失敗しました:(

<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>
phptheme-developmentcustomizationjqueryjavascript
1
Dan Hawkins

私はサイトのコードを改良するのにしばらく時間をかけました - これは問題でした：

削除する

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

header.phpの3行目に

それから "Header.php"の先頭にCSSとjQueryのこのビットを追加してください。

<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>
0
Dan Hawkins

これはCSSロードの問題であると思います。サブメニューを隠しているスタイルシート（あなたの場合はdropdowns.less）をロードする前に、Webサイトはすべてのリソースをロードします。 WordPressで.lessをエンキューするのは、通常のCSSスタイルシートをエンキューするのとは少し異なるので、これをチェックする必要があります。

これが実際に問題である場合、これを機能させるための単純な修正は、メインのstyle.cssの "display：none"ルールをコピーすることです。

.dropdown-menu { display: none; }

これがうまくいったら私に知らせて

0
FelixSima