Collapsing all menus and hiding them at the same time?

Question

For some reason, I can't get jQuery menus to collapse and hide at the same time. Individual calls to collapse or hide the menu work, just not at the same time.

For collapsing the menu, I'm using $(menu).menu("collapseAll", null, true) as stated via the jQuery documentation .

For hiding the menu, I'm calling $(menu).hide() , nothing fancy. Here's the documentation .

And here's a JSFiddle of what I'm trying to do . Pick a menu option, then click the "Show menu" button. The menu is shown and collapses after about a half second in this example. Ultimately, this menu will be used in many places of my code, so it's important that the menu isn't expanded to the last menu page when it's displayed to the user after its first appearance.

Answer 1

It looks like this menu has a built in timeout when you click on an item, you can see this when you click on the items, the menu does not collapse right away. It hides right away because you have the .hide() and that executes right away.

The only way I can do what you want was

http://jsfiddle.net/u2v2x049/7/

$(function () {
    var menu = $("#menu");

    menu.menu({
        select: function (event, ui) {
            $(this).menu("collapseAll", null, true);
            setTimeout(function () {
                menu.hide();
            }, 500);
        }
    });

    $("button").click(function (event) {
        menu.show();
    });
});

So it collapses all of them then I hide the menu after 500 ms. You can make it 400 if you want. My guess is the menu probably checks for its visibility, and if it is not visible then it doesn't collapse properly. I don't really use this UI, this is all I can offer you.

Actually 300 ms seems to be perfect timing, http://jsfiddle.net/u2v2x049/8/

Answer 2

The collapse-all method does not do what you are expecting:

Indicates whether all sub-menus should be closed or only sub-menus below and including the menu that is or contains the target of the triggering event.

So, it's just for opening/closing the sub-menus - not the entire menu structure. Instead, you can enclose each menu structure in a DIV and:

(1) put overflow:hidden; on the containing div, and

(2) use jQuery to animate the div's height

Try this instead:

$('container_DIV').animate({
    height: '0px'
},800);

Here is a jsFiddle with a full demo:

http://jsfiddle.net/73jgv60a/

---

In the fiddle, note that the menu vanishes off the screen when animation is completed. This is because both menu structures are floated left, and when the height of the first one becomes zero, the other one just moves into its place. To prevent this, if desired, wrap the outer container in another DIV that retains space on the page.

---

The menu pages actually do open, but you cannot see them because the DIV is tight to the main menu, and has overflow:hidden; .

At first, I planned to chain .css('overflow','hidden or visible') to each toggle function, but it turns out that overflow:hidden does not seem to be required.

Revised jsFiddle Demo