マルチレベルのメニュー

Question

<div id="list"> 
 
     <ul> 
 
     <li><a href="#">Product Category1</a></li> 
 
     <li><a href="#">Product Category2</a></li> 
 
     <li><a href="#">Product Category3</a></li> 
 
     <li><a href="#">Product Category4</a></li> 
 
     <li><a href="#">Product Category5 
 
      <ul> 
 
       <li><a href="#">Product subcategory1</a></li> 
 
       <li><a href="#">Product subcategory2</a></li> 
 
       <li><a href="#">Product subcategory3</a></li> 
 
       <li><a href="#">Product subcategory4</a></li> 
 
       <li><a href="#">Product subcategory5 
 
       <ul> 
 
        <li><a href="#">Sub sub category1</a></li> 
 
        <li><a href="#">Sub sub category2</a></li> 
 
        <li><a href="#">Sub sub category3</a></li> 
 
        <li><a href="#">Sub sub category4</a></li> 
 
       </ul> 
 
       </a></li> 
 
      </ul> 
 
     </a></li> 
 
     </ul>

製品Category5>製品subcategory5>サブサブcategory4

"サブサブcategory4は" 全体のリンクをロードし、クリックページがアクティブなクラスを取得する必要がある場合。

製品Category5（これはアクティブなクラスを持っている必要があります）>製品subcategory5（これはアクティブなクラスを持っている必要があります）>のようなサブサブcategory4（これはアクティブなクラスを持っている必要があります）

だけでjqueryのか、リファラ機能を使用しています。

Answer 1

だから、stackOverflowで検索し、マルチレベルの親を見つけるためにコードを使用しました。それはそのトリックを行うようです。以下のスニペットを確認してください：

$.fn.nthParent = function(n) { 
 
    var p = this; 
 
    for (var i = 0; i < n; i++) { 
 
    p.parents('li').first().find('a').first().addClass('active') 
 
    p = p.parents('li').first(); 
 
    } 
 
    return p; 
 
} 
 

 
$('a').on('click', function() { 
 
    $(this).nthParent(4); 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="list"> 
 
    <ul> 
 
    <li><a href="#">Product Category1</a></li> 
 
    <li><a href="#">Product Category2</a></li> 
 
    <li><a href="#">Product Category3</a></li> 
 
    <li><a href="#">Product Category4</a></li> 
 
    <li><a href="#">Product Category5</a> 
 
     <ul> 
 
     <li><a href="#">Product subcategory1</a></li> 
 
     <li><a href="#">Product subcategory2</a></li> 
 
     <li><a href="#">Product subcategory3</a></li> 
 
     <li><a href="#">Product subcategory4</a></li> 
 
     <li><a href="#">Product subcategory5</a> 
 
      <ul> 
 
      <li><a href="#">Sub sub category1</a></li> 
 
      <li><a href="#">Sub sub category2</a></li> 
 
      <li><a href="#">Sub sub category3</a></li> 
 
      <li><a href="#">Sub sub category4</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul>