Question

I’m trying to beat a basic accordion style menu into submission – using jQuery.

Here’s the menu:

http://www.cybart.com/bscg/

Here’s a snippet of code that gives it accordion functionality:

$('#access ul li').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).children('ul:hidden').slideDown();

    });

The problem: a click on a sub-menu link makes the submenu slide up (and close).

I want to keep the submenu open when the submenu link is clicked, and slide up only when a top level links are clicked.

How can I select only the top level ul with jQuery to animate the submenu? Or is there a way to select the sub-menu link and “tell it” to keep the submenu open on click?

I would appreciate your wisdom!

Answer 1

It seems like you need to use the > operator in CSS.

.foo > .bar selects all elements with class bar that is a direct child of an element with class foo

Got it, working code:

$('#access ul.menu > li > a').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).siblings('ul').slideDown();
    });
}); 

---

To keep the menu from sliding back up again this works:

$('#access ul.menu > li > a').click(function(){
        var siblingUl = $(this).siblings('ul');
        if(siblingUl.is(':visible')) { // The currently open menu was clicked
            // Remove this if you want nothing to happen
            siblingUl.slideUp();
            return;
        }

        $('#access ul ul:visible').slideUp();
        siblingUl.slideDown();
    });
});