Jquery添加和刪除mutlilevel子菜單中的活動類

Question

我是jQuery的新手，所以我很抱歉，如果這是一個愚蠢的問題。但是我一直在研究Stack Overflow，我可以找到一半工作的東西，但我無法完全發揮作用。 我有2嵌套的子菜單選項卡，一旦主標籤(Products)點擊，它得到活躍起來，如果我點擊的(products)即(Buttons)子菜單，還是主標籤(products)是積極的，如果再我點擊按鈕(i.e. Button1)的子菜單，仍主要選項卡(Products)和子菜單(Buttons)處於活動狀態。

我想單擊任何選項卡的submenu時，該​​的父標籤會變得無效。

任何幫助將是偉大的！

這是我試過的。

HTML文件

<ul> 
    <li> <a href="{% url 'home' %}" class="waves-effect"><i class="mdi mdi-home"></i><span> Home </span></a> </li> 
    <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-album"></i> <span> Products </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a> 
    <ul class="list-unstyled"> 
     <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><span> Buttons </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a> 
     <ul class="list-unstyled"> 
      <li><a href="#">Buttons1</a></li> 
      <li><a href="#">Buttons2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Panels</a></li> 
    <li><a href="#">Tabs &amp; Accordions</a></li> 
    <li><a href="#">Modals</a></li> 

</ul> 

jQuery的

i.$leftMenuToggle.on("click", function(e) { 
      e.stopPropagation(), i.openLeftBar() 
     }), 
     i.$menuItem.on("click", i.menuItemClick), 
     i.$firstMenuChild.parents("li:last").children("a:first").addClass("active").trigger("click"), 

     i.$menuItem.each(function() { 
      this.href == window.location.href && (e(this).addClass("active"), 
       e(this).parent().addClass("active"), 
       e(this).parent().parent().prev().addClass("active"), 
       e(this).parent().parent().prev().trigger("click")) 
     }) 

Answer 1

檢查以下片段以供參考。

$('a').click(function(){ 
 
    $('.myUL').find('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
})

.active{ 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="myUL"> 
 
    <li> <a href="#" class="waves-effect"><i class="mdi mdi-home"></i><span> Home </span></a> </li> 
 
    <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-album"></i> <span> Products </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a> 
 
    <ul class="list-unstyled"> 
 
     <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><span> Buttons </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a> 
 
     <ul class="list-unstyled"> 
 
      <li><a href="#">Buttons1</a></li> 
 
      <li><a href="#">Buttons2</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Panels</a></li> 
 
     <li><a href="#">Tabs &amp; Accordions</a></li> 
 
     <li><a href="#">Modals</a></li> 
 

 
    </ul>