サブメニューをクリックするとWordPressメニューがアクティブになります

Question

私はドロップダウンリストを持つWordPressメニューを持っています。選択したメニュー項目がアクティブなときに下線を引くCSSコードがあります。これは、ルートレベルのメニュー項目とサブメニュー項目の両方で機能します。私がしたいのは、サブメニュー項目の1つがクリックされたときにアクティブにドロップダウンを設定することです。私はこれをjQueryで試しています。

jQuery(function($) { 
    $(".navbar .nav .nav-item.dropdown li").click(function() { 
     $(".navbar .nav .nav-item.dropdown").addClass('active'); 
    }); 
} 

ほとんど動作します。サブメニュー項目をクリックすると、ドロップダウンがアクティブになっているのがわかりますが、アクティブに戻ってすぐに戻ります。私はそれが起こっていると思うのは、jQueryが起動し、ドロップダウンをアクティブにしてからページをリロードし、そのアクティブが抹消されるということです。

どうすればいいですか？

Answer 1

これについて考えた後、私はそれが深刻なことを思い知らされていることに気付きました。私は、ページが読み込まれた後、サブメニュー項目を見る必要があった。それが私が間違ってやっていた最初のことです。その後、サブメニュー項目のリストを取得し、アクティブなクラスを持っているかどうかを確認し、そうであればドロップダウン項目をアクティブに設定するだけです。以下は私のためにこれを行うコードです。より良い方法がありますか？新しいサブページをロードするときにいうし、クリックで機能を実行するので、それはの削除を取得する理由

$(window).load(function (e) { 
    var listItems = $('.navbar ul li ul.dropdown-menu .nav-item'); 

    //Loop the listitems and check to see if any are active. 
    $.each(listItems, function(key, litem) { 
     if ($(litem).hasClass('active')) { 
      $(".navbar .nav .nav-item.dropdown").addClass('active'); 
      return false; 
     } 
    }) 
}) 

Answer 2

理由があります。

あなたができることは、サブメニュー項目のいずれかがアクティブであるかどうかをチェックしてから親にaddClassをチェックするjQuery関数がページにあるときです。

私はわからないとして

は、このカスタムメイドメニューであるか、WPメニューでは、このような構造を持っていると仮定することができます：あなたはこの瞬間に何ができるか

<ul class="parent-menu"> 
    <li>Parent Item 
    <ul> 
     <li class="someSubMenuClass active">Child Item</li> 
    </ul> 
    <li> 
</ul> 

はクラスで最も近い親要素を見つけるためにjQuery.closest('.parent-menu') を使用しています親メニューに戻り、その要素にクラスを追加する必要があることが判明した後。 だから、次のようになります。あなたが構造を更新する必要があるかもしれませんが、これは正常に動作する必要がありますので、私はあなたの構造について確認していない

$(document).ready(function() { 
    $("li.someSubMenuClass.active").closest('.parent-menu').addClass('active'); 
}); 

注意。