jquery menu with dynamic content fade in

I have a menu with parent and child categories. There is a separate page for each parent category which contains all the content for the subcategories. The content is hidden until a user clicks on the menu item. When a user clicks a sub-category, the main content fades in. Here's the problem: if a user clicks a subcategory for a different parent category (not the page that they're currently on), it doesn't work. It only displays content of the sub-category of the page that they're on. I hope this was clear. What's the best solution for this?

This is my menu:

 <div id="sidebar">
<ul>
    <li class="main">
        <a href="real_estate.php">Real Estate </a>
        <ul class="sub current" id="sub_real_estate">
            <li class="sub_1">Consulting Services</li>
            <li class="sub_2"> Investment</li>
            <li class="sub_3"> Property Management</li>
            <li class="sub_4"> Development</li>
        </ul>
    <开发者_如何学JAVA;/li>
    <li class="main">
        <a href="investment.php">Investment</a>
        <ul class="sub" id="sub_investment">
            <li class="sub_1">Philosophy</li>
          <li class="sub_1">Criteria</li>
      </ul>
    </li>
</ul>
</div>

This is the jquery:

$(document).ready(function() {
$(".main").hover(function() {
    $(".sub", this).slideDown('slow');
},
function() {
    $(".sub", this).not(".current").slideUp('slow');
});

$(".sub li").click(function() {
    var menuID = $(this).attr("class");
    var substr = menuID.split('_');
    $(".sub li").removeClass("highlight");
    $(this).addClass("highlight");
    $("#main_content").removeClass("active");
    $(".active").hide();
    $("div#real_" + substr[1]).addClass("active");
    $("div#real_" + substr[1]).fadeIn("slow");
});
});

Make your subcategories actual links (better for usability, anyways). For example:

<li class="main">
    <a href="investment.php">Investment</a>
    <ul class="sub" id="sub_investment">
        <li class="sub_1"><a href="investment.php#philosophy">Philosophy</a></li>
        <li class="sub_1"><a href="investment.php#critera">Criteria</a></li>
    </ul>
</li>

Assign those sections id's appropriately. In other words, The container for the "Philosophy" section would get id="philosophy". Then, even if JavaScript is disabled, the links will take the user to the exact right place in the document.

Now, for the potentially tricky part. You need a way of distinguishing between links that should be handled by your JavaScript (subcategories for active category) and those that should just load a new page (other subcategories). I'd recommend adding a class such as 'active' to the current category, which is easy enough to accomplish on the server-side. Then you would just need to modify your selector like so:

$(".active .sub li").click(function() {

Rinse and repeat with any other selectors. With that, the click behavior will only be applied to subcategories in the current page; everything else will load the other category page. Also, since the list items are now links, add return false; to the bottom of your click handler. That will prevent the browser from loading the URL in its href attribute,

The last piece is a way to detect which subcategory to show at page load:

if (location.hash) {
    $(location.hash).show();
}

That's the basic idea. Modify that piece of code to include any other effects or processing needed. All it's doing is basically saying "if there's an anchor link in the URL, show the element with that id."