WPメニュー項目アンカーでjQueryセレクターが動作しない

Question

メニューリンクをセレクターとして使用して数日間苦労しています。 それは同じものの非ワードプレス版で動作しますが、WPになると私は狂ってしまいます。 https://youtu.be/SFx8TyPWhLg

Iが複数のコード、異なるセレクタパス試み：

nav.mobile>ul>li.menu-item-has-children>a 
li.menu-item-has-children>a 
.expand>a 
.expand > a 

等を は、ここでの説明と動作とユーチューブのリンクです。

私は（このコードで）それが正常に動作することの長さをチェックしています：

if ($('nav.mobile>ul>li.menu-item-has-children>a').length) { 
    // Do something 
} 

をしかし、それは何をすべきか行っていないのです。ここで

$('.expand>a ').click(function() { 
    $('.sub-menu').addClass('is_open'); 
    $('nav.mobile').addClass('is_submenu_open'); 

     setTimeout(function() { 
      var offset = $('.is_open').offset(); 
      $('.close_menu').width(offset.left); 
     }, 500) 

    }); 

$(".expand>a ").on('click',function(event){ 
     event.preventDefault(); 

     $(this).parent().find("ul").addClass("is_open"); 
     $("nav.mobile").addClass('is_submenu_open'); 

     setTimeout(function() { 
      var offset = $('.is_open').offset(); 
      $('.close_menu').width(offset.left); 
     }, 500) 
    }); 


$(".expand>a").click(function(event){ 
    event.preventDefault(); 
    if (event.target !== this) 
    return; 
     $(this).find(".sub-menu:first").addClass(function() { 
      $('.sub-menu').addClass("is_open"); 
      $('nav.mobile').addClass('is_submenu_open'); 
       setTimeout(function() { 
        var offset = $('.is_open').offset(); 
        $('.close_menu').width(offset.left); 
       }, 500) 
    }); 
}); 

は、メニューのHTML出力です：

<nav class="nav-header mobile" itemscope itemtype="http://schema.org/SiteNavigationElement"> 
    <ul id="menu-main-menu" class="menu genesis-nav-menu"> 
     <li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-56"><a href="http://www.rfr.dev/" itemprop="url"><span itemprop="name">Home</span></a></li> 
     <li id="menu-item-2077" class="expand menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2077"><a href="#" itemprop="url"><span itemprop="name">What we do</span></a> 
      <ul class="sub-menu"> 
       <li id="menu-item-1883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1883"><a href="http://www.rfr.dev/what-we-do/search-acquisitions/" itemprop="url"><span itemprop="name">SEARCH &#038; ACQUISITIONS</span></a></li> 
       <li id="menu-item-1884" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1884"><a href="http://www.rfr.dev/what-we-do/project-management/" itemprop="url"><span itemprop="name">PROJECT MANAGEMENT</span></a></li> 
       <li id="menu-item-1890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1890"><a href="http://www.rfr.dev/what-we-do/interior-architecture-design/" itemprop="url"><span itemprop="name">INTERIOR ARCHITECTURE &#038; DESIGN</span></a></li> 
       <li id="menu-item-1424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1424"><a href="http://www.rfr.dev/what-we-do/property-advisory/" itemprop="url"><span itemprop="name">ADVISORY</span></a></li> 
       <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://www.rfr.dev/what-we-do/investment/" itemprop="url"><span itemprop="name">Investment</span></a></li> 
       <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.rfr.dev/what-we-do/home-management/" itemprop="url"><span itemprop="name">HOME MANAGEMENT</span></a></li> 
      </ul> 
     </li> 
     <li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="http://www.rfr.dev/case-histories/" itemprop="url"><span itemprop="name">Case Histories</span></a></li> 
     <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.rfr.dev/rfr-scrapbook/" itemprop="url"><span itemprop="name">RFR Scrapbook</span></a></li> 
     <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://www.rfr.dev/news/" itemprop="url"><span itemprop="name">News &#038; Press</span></a></li> 
     <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.rfr.dev/team/" itemprop="url"><span itemprop="name">Team</span></a></li> 
     <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.rfr.dev/contact/" itemprop="url"><span itemprop="name">Contact</span></a></li> 
    </ul> 
</nav> 

私はアイデアの出てるそれと間違っているもの ここに私のjQueryコード（セレクタとしてLiとすべての作品）があります。 お願いします。

乾杯、 クリス

Answer 1

！問題は、一般的には、CSS

.menu .menu-item > a:focus + ul.sub-menu, 
.menu .menu-item.sfHover > ul.sub-menu { 
    left: auto; //exactly this style 
    opacity: 1; 
} 

のこの部分によって作られた 、それはメニューのドロップダウンを扱うジェネシスネイティブSuperfish.jsに関連します。

私mobile.cssへの簡単な変更は

.menu .menu-item > a:focus + ul.sub-menu, 
.menu .menu-item.sfHover > ul.sub-menu { 
    left: 0; 
    opacity: 1; 
} 

それを釘付けに助けをあなたに@AndyTschierschありがとうございました！

Answer 2

、このいずれかを試してみて、私はクラスis_openは、サブメニューULに追加するかどうかをお知らせください：それを見つけた

$(".expand > a > span").on('click',function(event){ 
    event.preventDefault(); 

    console.log("test"); 
    $(this).closest("li.expand").find("ul").addClass("is_open"); 
    $("nav.mobile").addClass('is_submenu_open'); 

    setTimeout(function() { 
     var offset = $('.is_open').offset(); 
     $('.close_menu').width(offset.left); 
    }, 500) 
});