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(); 

}); 

「選択"クラスは黄色のメニューを強調表示するはずですが、今すぐクリックすると黄色で点滅します。 サブメニューは開いたままになりませんe ither：（（（

Answer 1

私はリンクのクリックを傍受し、Ajaxを読み込んでいますか？ そうでない場合は、選択したクラスが消えるというロジックです。なぜなら、ページの変更/再読み込みが行われるからです。あなたの状態をチェックするために放火犯を使用します...あなたはすべてのあなたのメニューのhrefに対するwindow.locationのをチェックするinit関数を記述し、試合に選択したクラスを追加することができ、という

先端を解決するために

（例えば、選択されたクラスがあなたの要素上にあるかどうかを確認してください）、それはあなたが理解するのに役立ちます...

Answer 2

@ Guillaume86は私のdocument.ready機能の下に掲載されたinitコードを入れました。 私はそれを理解するのはかなり簡単だと思います：

.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'); 
});