jquery menü yardım

Merhaba arkadaşlar
Ağaç şeklinde bir jquery menüm var
ana kategori seçilince alt kategoriyi açıyor
alt kategorinin de alt kategorisi varsa onu nasıl göstericem yapamadım.

kodlara ekledim fakat
ana kategoriye basınca direk alt ve onun altını otomatik açıyor

bilen arkadaşlardan yardım talep ediyorum

Menüm
http://diray67.tk/menu/


Kodlarım

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
.event-children {
    margin-left: 20px;
    list-style: none;
    display: none;
}


</style>

<ul name="events-categories" id="events-categories">
    <input type="checkbox" id="masterall">Check All

 
    <li><input type="checkbox" name="secilenCat[]" value="<?=$goster['catid']?>" placeholder="" id="category-185" class="events-category"> ana kategori
        <ul class="event-children">

            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="child events-child-category">alt kategori
                 <ul class="event-children2">

            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="child events-child-category2">alt alt kategori
             
            </li>

        </ul>
            </li>

        </ul>
    </li>


</ul>

<script type="text/javascript">
    /**
 * left sidebar events categories
 * toggle sub categories
 */
 $('.events-category').change( function(){
    console.log('showing sub categories');
    var c = this.checked;
    if( c ){
        $(this).next('.event-children').css('display', 'block');


    }else{
        $(this).next('.event-children').css('display', 'none');

    }
 
});

 $('#masterall').change( function(){
    $('input[type=checkbox]').attr('checked', this.checked);
});
 $('.events-child-category-all').change( function(){
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});
</script>

Buyrun hocam.

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
.event-children {
    margin-left: 20px;
    list-style: none;
    display: none;
}
</style> <ul name="events-categories" id="events-categories">
    <input type="checkbox" id="masterall">Check All    
    <li><input type="checkbox" name="secilenCat[]" value="<?=$goster['catid']?>" placeholder="" id="category-185" class="events-category"> ana kategori
        <ul class="event-children">            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="events-category child events-child-category">alt kategori
                 <ul class="event-children">            <li><input type="checkbox" name="secilenCat[]" value="<?=$goster2['catid']?>" id="child-category-190" class="events-category child events-child-category2">alt alt kategori
               
            </li>        </ul>
            </li>        </ul>
    </li>
</ul><script type="text/javascript">
    /**
 * left sidebar events categories
 * toggle sub categories
 */
 $('.events-category').change( function(){
    console.log('showing sub categories');
    var c = this.checked;
    if( c ){
        $(this).parent().find('> .event-children').css('display', 'block');
    }else{
        $(this).next('.event-children').css('display', 'none');    }
   
}); $('#masterall').change( function(){
    $('input[type=checkbox]').attr('checked', this.checked);
});
 $('.events-child-category-all').change( function(){
    $(this).parent().siblings().find(':checkbox').attr('checked', this.checked);
});
</script>

çok tşkler hocam tam istediğim gibi oldu eyw.