jquery - Onclick show submenu but hide other submenu(s) -

i using jquery ui menu widget have header navigation on pages

here mock http://jsfiddle.net/ctl6t/1/

my issue want close other shown submenus if main menu clicked, can see in fiddle if click 1 main stub, submenu stays open if click main stub

i thought using $.each on click event, using same code toggles iterate through elements , flip them , forth, opens opposite menu

        $('.has-sub').on('click', function(){             $('#mainmenu li').each(function () {                 $(".submenu" ).toggle();             });             $(this).toggleclass('ui-state-active').children('span').toggleclass('ui-icon-triangle-1-s ui-icon-triangle-1-n');             return false;          }); 

and mess

 $('.has-sub').on('click', function(){ $('#mainmenu li').each(function () {   $(".submenu" ).toggle();   $(this).toggleclass('ui-state-active').children('span').toggleclass('ui-icon-triangle-1-s ui-icon-triangle-1-n'); }); return false;  }); 

as appreciated

*due flashing of unstyled content, decided have main menu static html using jquery ui theme classes, should not effect functionality of im asking

try this:

$(function() {              $( ".submenu" ).menu({                 position: {at: "left bottom"},                 icons: { submenu: "ui-icon-triangle-1-s" }             });             $('.has-sub').on('click', function(){                 $(this).next(".submenu").toggle();                 $(this).toggleclass('ui-state-active').children('span').toggleclass('ui-icon-triangle-1-s ui-icon-triangle-1-n');                 $('.has-sub').not($(this)).each(function(){                    $(this).next(".submenu").hide();                     $(this).removeclass('ui-state-active');                 });                 return false;                 });      }); 

jsfiddle: http://jsfiddle.net/ctl6t/6/