Setting active class for navigation using javascript

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?

Then post the answer (as an answer), or delete the question. — David Thomas
– David Thomas, Commented Feb 18, 2012 at 13:39
I will post the answers so that others can see it as well, however i can not do that for the next 6 hours as i do not have enough points to answer my own question! — Namit
– Namit, Commented Feb 18, 2012 at 14:29

Namit · Accepted Answer · 2012-02-19 12:02:18Z

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

answered Feb 19, 2012 at 12:02

Namit

1,3228 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting active class for navigation using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related