Help with "selected" items on JQuery Menu

I am trying to create a simple vertical menu, with submenus. I wanted the selected item to be highlighted as well as if the submenu is selected, for it to stay open.

i am sooo lost :(

please help me figure this out. this is what i have so far

<ul id="menu"> 
 <li><a href="/Source.aspx" > New </a></li>
 <li><a href="#"> New Transaction</a>
 <ul> 
 <li><a href="/Transaction.aspx?id=S">Shipment</a></li> 
 <li><a href="/Transaction.aspx?id=R">Reciept</a></li> 
 <li><a href="/Transaction.aspx?id=DA">Disassemble</a></li> 
 <li><a hre开发者_如何学运维f="/Transaction.aspx?id=DS">Disposal</a></li> 
 </ul> </li>
 <li><a href="/Source.aspx?id=U">Correction</a></li>
 </ul>

here is my js:

function initMenu() {
    $("#menu ul").hide();
    $("#menu li a").click(function() {
    $("#menu li").removeClass('selected');
    $(this).parent().addClass('selected');
        $(this).next().slideToggle('normal');
    });
}
$(document).ready(function() {
    initMenu();

});

"selected" class is supposed to highlight the menu in yellow, right now it just blinks yellow when i click on it and goes away... the sub menu does not stay open either :(((

I'm wondering, do you intercept the click on the links and do some Ajax loading? If you're not, it's logic that the selected class disapear, because the page change/reload.

To solve that, you can write a init function that checks the window.location against all your menu hrefs and add the selected class to the match...

tip: use firebug to check the state of your elements (check if a selected class is on your element for example), it will help you to understand...

As @Guillaume86 said, I put the init code posted below in my document.ready function. I think it should be quite simple to understand it:

.menu is the menu links class. The script checks for all menu items if their href attribute is equal to the actual page location and updates all of them with the selected or not_selected class.

$('.menu').each (function(){
    if ($(this).attr('href') == $(location).attr('href'))
        $(this).addClass('selected').removeClass('not_selected');
    else
        $(this).addClass('not_selected').removeClass('selected');
});