Question

I’m trying to set up a click to show menu which has two separate menus.

One menu men should click on, the other, women.

If one is clicked the other should disappear (if it’s visible), if you click off the menu then it should disappear as well. Or if you tap the top level menu link again it should hide the sub-menu as well.

I’ve made it sound more complicated than it is but here’s the code I’ve got thus far:

http://jsfiddle.net/GLZK5/7/

Note that if you click “men” it shows the sub-menu. Clicking women also shows sub menu and hides the “Men” sub-menu, but if you click back on “Men” it just hides the “Women” and doesn’t show the “Men”…

I’m confused..

Answer 1

Steps

1. When you load the page, hide all the menus.
2. Now for the handler, when you click on it, you have two cases.
   1. See if the submenu is visible, if so, hide the sub-menu.
   2. If the submenu is not visible, then hide everything and show just the submenu

Use this code:

$(document).ready(function() {
    $(".gen-sel > li > ul").hide();
    $(".gen-sel > li > a").click(function(){
        if ($(this).next().is(":visible"))
            $(this).next().hide();
        else
        {
            $(".gen-sel > li > ul").hide();
            $(this).next().show();
        }
    });
});​

Demo: http://jsfiddle.net/GLZK5/10/