jQuery Accordion的简单问题

Question

I have a simple jQuery accordion which works... almost perfectly :)

As you can see from the demo, I currently have the navigation "open" as I'm in the "Team" page.

Is it possible when I click 'About Us', it closes the element altogether. As you can see from the demo it closes it, but then quickly re-opens it. I guess this occurs because of the code on line 27 of my CSS.

Here is my demo : http://jsfiddle.net/URYzK/5/

Here is my JavaScript:

jQuery(function($) {

    $('#accordion > li > a').click(function (e) {
        if ($(this).next('ul').length == 0) {
            // link is for navigation, do not set up accordion here
            return;
        }

        // link is for accordion pane

        //remove all the "Over" class, so that the arrow reset to default
        $('#accordion > li > a').not(this).each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }

            $(this).siblings('ul').slideUp("slow");
        });

        //showhide the selected submenu
        $(this).siblings('ul').slideToggle("slow");

        //addremove Over class, so that the arrow pointing downup
        $(this).toggleClass($(this).attr('rel') + 'Over');
        e.preventDefault();
    });

});

Many thanks for any help here.

Answer 1

Remove display:none from #accordian ul and remove the .children CSS entirely. I believe this creates the behavior you want. You were setting the children ul to be display:none , and then trying to force .children , which is a ul , to be display:block later, which is why they were fighting.

Updated your jsFiddle as well.