使子菜单项被选择

Question

我从这个website得到了一个jquery垂直手风琴菜单。 当您点击菜单时，它会添加一个活动类，以便您可以在点击该项时控制此项目的外观。我也想用子菜单来做到这一点。但我没有JavaScript技能。有人可以帮我弄这个吗。

这是JavaScript：

jQuery.fn.initMenu = function() { 
return this.each(function(){ 
    var theMenu = $(this).get(0); 
    $('.acitem', this).hide(); 
    $('li.expand > .acitem', this).show(); 
    $('li.expand > .acitem', this).prev().addClass('active'); 
    $('li a', this).click(
     function(e) { 
      e.stopImmediatePropagation(); 
      var theElement = $(this).next(); 
      var parent = this.parentNode.parentNode; 
      if($(parent).hasClass('noaccordion')) { 
       if(theElement[0] === undefined) { 
        window.location.href = this.href; 
       } 
       $(theElement).slideToggle('normal', function() { 
        if ($(this).is(':visible')) { 
         $(this).prev().addClass('active'); 
        } 
        else { 
         $(this).prev().removeClass('active'); 
        }  
       }); 
       return false; 
      } 
      else { 
       if(theElement.hasClass('acitem') && theElement.is(':visible')) { 
        if($(parent).hasClass('collapsible')) { 
         $('.acitem:visible', parent).first().slideUp('normal', 
         function() { 
          $(this).prev().removeClass('active'); 
         } 
        ); 
        return false; 
       } 
       return false; 
      } 
      if(theElement.hasClass('acitem') && !theElement.is(':visible')) {   
       $('.acitem:visible', parent).first().slideUp('normal', function() { 
        $(this).prev().removeClass('active'); 
       }); 
       theElement.slideDown('normal', function() { 
        $(this).prev().addClass('active'); 
       }); 
       return false; 
      } 
     } 
    } 
); 

}）; }; （文档）.ready（函数（）{$（'。menu'）。initMenu（）;}）;

这是HTML：

<ul class="menu collapsible"> 
<li> 
    <a href="#">PROJECTS</a> 
    <ul class="acitem"> 
     <li><a href="#">~ RESIDENTIAL</a></li> 
     <li><a href="#">~ COMMERCIAL</a></li> 
     <li><a href="#">~ MIXED USE</a></li> 
     <li><a href="#">~ URBAN DESIGN</a></li> 
     <li><a href="#">~ COMPETITIONS</a></li> 
     <li><a href="#">~ INTERIOR DESIGN</a></li> 
     <li><a href="#">~ SURVEY</a></li> 
     <li><a href="prj-opdekaart.html" target="_blank">~ ON THE MAP</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">OFFICE</a> 
    <ul class="acitem"> 
     <li><a href="#">~ INFO</a></li> 
     <li><a href="#">~ EMPLOYEES</a></li> 
     <li><a href="#">~ VACANCY</a></li> 
     <li><a href="#">~ DOWNLOAD</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">CONTACT</a> 
    <ul class="acitem"> 
     <li><a href="#">~ ADDRESS</a></li> 
     <li><a href="#">~ E-MAIL</a></li> 
    </ul> 
</li> 

Answer 1

当你点击项目或办公室或接触。那些获得一个活跃的类添加，所以它可以控制（颜色）与CSS。如果你点击住宅或商业等（我称之为子菜单），我也希望这样。