jquery conditional logic for currentpage

Question

I'm using jQuery for a vertical site navigation menu, all links within site. I have the basic functionality working, but am at a loss as to the correct if-else to accomplish the following:

As the code stands, the submenu items are always initially hidden, but I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage. The code as it stands is:

(function(){
  $('li:has(ul)')
  .click(function(event){
    if (this == event.target || $(event.target).parent()[0] == this) {
      if ($(this).children('ul').is(':hidden')) {
        $(this)
        .css('list-style-image','url(minus.gif)')
        .children('ul').slideDown();
      }
      else {
        $(this)
       .css('list-style-image','url(plus.gif)')
       .children('ul').slideUp();
      }
    }
  })
  .css({
    cursor:'pointer',
    'list-style-image':'url(plus.gif)'
  })
  .children('ul').hide();

  $('li:not(:has(ul))').css({
    cursor: 'default',
    'list-style-image':'none'
  });
});

Hopefully someone can put me on the right track.

Bob McLeod

Answer 1

I would make a showMenuItem() function and call it in both places where you want to show a menu item.

$(function() { $('.currentpage').each(function() {
  if ($(this).parents().filter('ul').is(":hidden")) {
    showMenuItem($(this).parents().filter('ul'));
  } else {
    showMenuItem(this);
  }
}});

Answer 2

I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.

How about afterwards doing:

$('.currentpage').parents('ul').show();