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

Answer 2

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

友情链接