子が現在アクティブであればメニューを親に展開

Question

私は現在、クリックすると拡張可能なメニューを作成しようとしていますが、子供がクリックされるまで開いたままにしておいてから、そのページに移動してくださいそのサイトに到達すると拡張されます。 （現在それは崩壊している）。

私は現在、クリックしたときに子どもを展開して表示するメニューを持っています。現在はjavascriptで作成されています。私はwordpressでメニューを作っています。そしてwordpressは自動的に "current-menu-item"というクラスを訪問しているliに追加します。

var clickMenu = function() { 
 
\t var getEls = document.getElementById("menu-shopmenu").getElementsByTagName("LI"); 
 
\t var getAgn = getEls; 
 

 
\t for (var i=0; i<getEls.length; i++) { 
 
\t \t \t getEls[i].onclick=function() { 
 
\t \t \t \t for (var x=0; x<getAgn.length; x++) { 
 
\t \t \t \t getAgn[x].className=getAgn[x].className.replace("unclick", ""); 
 
\t \t \t \t getAgn[x].className=getAgn[x].className.replace("click", "unclick"); 
 
\t \t \t \t } 
 
\t \t \t if ((this.className.indexOf('unclick'))!=-1) { 
 
\t \t \t \t this.className=this.className.replace("unclick", "");; 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t this.className+=" click"; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t getEls[i].onmouseover=function() { 
 
\t \t \t \t this.className+=" hover"; 
 
\t \t \t } 
 
\t \t \t getEls[i].onmouseout=function() { 
 
\t \t \t \t this.className=this.className.replace("hover", ""); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t 
 
window.addEventListener("load", clickMenu);

今私はちょうど新しいページがロードされたら、それは、拡張滞在作る助けを探しています。

また、これらの2つの機能がデザインに矛盾しますか？

Answer 1

current-menu-item要素の「親」だけをチェックできます。 display:blockまたはメニュー要素を表示させる他のCSSを適用します。 要件を満たしているかどうかを以下のコードで確認してください。

$(document).ready(function(){ 
    $(".current-menu-item").parent("your_parent_ul_div").css("display": "block"); 
}); 

リファhttps://api.jquery.com/parent/

---

リファ>Expand parent menu if child menu is selected

リファ>https://webdesignerhut.com/active-class-navigation-menu/