サブメニュー項目を選択

Question

私はこのwebsiteからjquery垂直アコーディオンメニューを得ました。 メニューをクリックするとアクティブなクラスが追加され、クリックしたときにこのアイテムの外観を制御できます。私はまた、サブメニューでこれをやりたいしかし、私は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; 
      } 
     } 
    } 
); 

}）。 };

$（document）.ready（function（）{$（ '。menu'）。initMenu（）;}）;

<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

あなたは、プロジェクトやオフィスやコンタクトをクリックしてください：

これはhtmlです。クラスをアクティブにしてCSSを使ってコントロールすることができます。あなたが住宅や商業などをクリックした場合でも（私がサブメニューと呼ぶ）これも欲しいです。