make submenu item selected

I got a jquery vertical accordion menu from this website. And when you click on the menu it gets an active class added so you can control the look of this item when you have clicked it. I also want to do this with the sub menu. But I have no javascript skills. Can someone help me with this.

this is the 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('n开发者_如何学运维ormal', 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();});

This is the 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>

---

When you click on projects or office or contact. those get a class active added so it can be controlled (color) with css. I want this also if you click on residential or commercial etc (those I call submenu).