Question

I am using PHP to echo my list of navigation options, this is being done due to different privileges for each user. The list is divided into groups which has a few more list items, one a user clicks on the heading of the group expands, listing the sub-menu. I have been able to set the active class for the menu which is currently open using this piece of javascript:

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

And this is my markup for list that are being displayed:

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

Here administration is my group heading and User Management is my sub-group.
Now using the above piece of code i am still not able to expand my menu on different pages, so that the user knows which page he is on?

Answer 1

I figured out the problem, for some odd reason, it requires me to declare the variable first:

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