Помощь с «выбранными» пунктами в меню JQuery

Question

Я пытаюсь создать простое вертикальное меню с подменю.Я хотел, чтобы выбранный элемент был выделен, а также если выбрано подменю, чтобы оно оставалось открытым.

Я так ооочень потерян: (

, пожалуйста, помогите мне разобраться в этом. Эточто у меня есть до сих пор

<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 href="/Transaction.aspx?id=DS">Disposal</a></li> 
 </ul> </li>
 <li><a href="/Source.aspx?id=U">Correction</a></li>
 </ul>

вот мои 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();

});

"выбранный" класс должен выделять меню желтым цветом, сейчас он просто мигает желтым, когда я нажимаюна это и уходит ... подменю тоже не остается открытым: (((

Answer 1

Мне интересно, вы перехватываете щелчок по ссылкам и делаете Ajax-загрузку? Если нет, то по логике выбранный класс исчезает, потому что страница меняется / перезагружается.

Чтобы решить эту проблему, вы можете написать функцию инициализации, которая проверяет window.location по всем ссылкам в вашем меню и добавляет выбранный класс к совпадению ...

совет: используйте firebug для проверки состояния ваших элементов (например, проверьте, есть ли выбранный класс в вашем элементе), это поможет вам понять ...

Answer 2

Как сказал @ Guillaume86, я поместил приведенный ниже код инициализации в мою функцию document.ready. Я думаю, что это должно быть довольно просто понять:

.menu - класс ссылок меню. Сценарий проверяет все пункты меню, если их атрибут href равен фактическому расположению страницы, и обновляет их все с помощью класса selected или not_selected.

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