JavaScriptを使用したナビゲーションのアクティブなクラスを設定する

Question

私はPHPを使用してナビゲーションオプションのリストをエコーし​​ています。これは各ユーザの特権によって異なります。リストはいくつかのグループに分かれています。グループの見出しをクリックすると、サブメニューが表示されます。ここで

echo "<ul id='menu'>"; 
echo "<li><a href='#'>Adminstration</a> 
<ul><li>"; 
echo "<a href='path_to_page/usermanagement.php'>User Management</a>"; 
echo "</li><li>"; 
// and some more items 

：

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu li a').click(function() { 
     var checkElement = $(this).next(); 
     if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
     //slide up if visible (works fine). 
     } 
     if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
     //otherwise slideDown (works fine too). 
     } 
    }); 
} 

$(document).ready(function() {markActiveLink();initMenu();}); 

function markActiveLink() { 
    $("#menu li ul li a").filter(function() { 
     return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase(); 
    }).addClass("active") 
    .closest('ul') //some markup problem 
    .slideDown('normal'); 
} 

そして、これが表示されているリストのための私のマークアップです：私は現在、javascriptのこの部分を使用して開いているメニューのアクティブなクラスを設定することができました管理は私のグループ見出しであり、ユーザー管理は私のサブグループです。 上記のコードを使用しても、私はまだ別のページにメニューを展開できないので、ユーザーは自分がどのページにいるか知っていますか？私はいくつかの奇妙な理由のために、それは最初の変数を宣言するために私を必要とし、問題を考え出し

Answer 1

：

var checkEle = $("#menu li ul li a").filter(function() { 
     return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase(); 
    }).addClass("active") 
    .closest('ul'); //get the closest ul 
    console.log(checkEle); 
    checkEle.slideDown('normal');