的onclick秀子卻隱藏着其他的子菜單（S）

Question

我使用jQuery UI菜單控件會對我的網頁標題導航

這裏是一個模擬了http://jsfiddle.net/ctL6T/1/

我的問題是我要關閉其他任何子菜單顯示如果點擊另一個主菜單，你可以在我的小提琴看到，如果你點擊一個主存根，子菜單保持打開狀態，如果你單擊另一個主要存根

我想通過使用上的click事件的$。每次，我可以通過使用相同的代碼來切換元素並將它們來回翻轉，但是這會打開相反的菜單

 $('.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>元素的觸發事件。當您在中#mainmenu所有元素<a>元素之一點擊一類的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/