OnClick шоу подменю, но скрыть другие подменю (ов)

Question

Я использую меню JQuery UI виджета, чтобы иметь заголовок навигации на моих страницах

вот макете http://jsfiddle.net/ctL6T/1/

Мой вопрос я хочу, чтобы закрыть любой другой показанные подменю, если щелкнуто другое главное меню, вы можете увидеть в моей скрипке, если вы нажмете один главный заглушка, подменю останется открытым, если вы нажмете еще один главный заглушка

Я думал, используя $ .each на событие click, i мог бы использовать тот же код, который переключает итерацию по элементам и переворачивает их назад и вперед, но это открывает противоположное меню

 $('.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; 
     }); 

и это просто беспорядок

$('.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; 
}); 

как всегда любая помощь ценится

* из-за мигания без стилей содержания, я решил иметь главное меню как статические HTML, используя некоторые jquery ui тематические классы, это не должно влиять на функциональность того, что им задают

Answer 1

Попробуйте следующее:

$(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/

Answer 2

Мое решение было вызвать событие при нажатии любой из <a> элементов в навигации. Когда вы нажмете на один из <a> элементов в пределах #mainmenu, все элементы с классом submenu будут скрыты. Кроме того, любые элементы с классом ui-state-active будут удалены классом ui-state-active.

Вот что я добавил, чтобы все это работало!

$('#mainmenu a').on('click', function(){ 
    $('.submenu').hide(); 
    $('.ui-state-active').removeClass('ui-state-active'); 
}); 

И вот скрипка! http://jsfiddle.net/ctL6T/5/

пересмотренной версия

Я добавил в некоторых дополнительных логиках для того, чтобы при нажатии на ссылке будет закрыть меню выпадающего. Если вы нажмете на ссылку в раскрывающемся списке, она закрывает раскрывающуюся навигацию и удаляет активное состояние. Кроме того, если вы нажмете на домашнюю ссылку, она закрывает раскрывающуюся навигацию и удаляет активное состояние.

Это должно помочь вам!

скрипки: http://jsfiddle.net/ctL6T/8/