jquery menu slide down

I have a vertical menu with sub categories. When a main category is clicked the sub-menu slides down and the previously opened sub-menu up slides up. I would like it if a user clicks on the same main-menu item a second time that i开发者_Python百科t slides up the associated sub-menu. With this code it opens and closes it almost simultaneously when the same main menu item is clicked a second time.

$(".main-cat").click(function() {
    $(".active-sub").hide('slow');
    $(".sub" , $(this).parent()).toggle('slow');    
    $(".sub" , $(this).parent()).addClass('active-sub');
});

<div id="sidebar">
<ul>
    <li class="main">
        <div class="main-cat 1">Real Estate</div>
        <ul class="sub" id="sub_real_estate">
            <li><div class="sub-cat 2">Consulting Services</div></li>
            <li><div class="sub-cat 3">Investment</div></li>
            <li><div class="sub-cat 4">Property Management</div></li>
            <li><div class="sub-cat 5"> Development</div></li>
        </ul>
    </li>
    <li class="main">
        <div class="main-cat 6">Investment</div>
        <ul class="sub" id="sub_investment">
                <li><div class="sub-cat 7">Philosophy</div></li>
                <li><div class="sub-cat 8">Criteria</div></li>
          </ul>
        </li>
    </ul>
</div>

You can delay changes by assigning your code to an anonymous function that runs once the initial change has taken place, something like -

$(".main-cat").click(function() {
    $(".active-sub").hide('slow', function () {
      $(".sub" , $(this).parent()).toggle('slow');    
      $(".sub" , $(this).parent()).addClass('active-sub');
    });
});

I'm not sure from your description if the above code will do the trick, but I thought the technique might help.

EDIT

Having looked at your HTML I think the code below should fix the problem (http://jsfiddle.net/WftqT/1/) -

$(".main-cat").click(function() {
    //hide or show clicked menu
    $(".sub" , $(this).parent()).toggle('slow');
    //if clicked menu is now visible close all other open menus
    if (!$(".sub" , $(this).parent()).is(':hidden')) $(".maincat").not(this).parents('li').find('ul:[class="sub"]').hide('slow');
});

Try this

$(".main-cat").click(function() {
    $('.active-sub').toggle('slow');
    $(".sub" , $(this).parent()).addClass('active-sub').toggle('slow');    
});

Just looking at your code it appears it never removes the active-sub class either. The functionality you've requested depends on your html but if you've got a list or div and subdivs, this jsFiddle will accomplish your goals: jsFiddle

stopPropagation() was added cause i don't believe you want the subdiv to close if someone is acting within it.

jQuery:

$(".main-cat").click(function() {
    current=$(this).find(".sub:hidden");
    $(".sub").slideUp(300);
    if(current.length){
        current.slideDown(300);          
    }  
});
$(".sub").click(function(event){
    event.stopPropagation();
});