有沒有簡化這個jQuery的方法？

Question

我寫了一個下面的結構下拉菜單。它應該點擊下拉，然後點擊關閉。

這裏的HTML

<ul id="nav" class="nav"> 
    <li> 
     <a id="menu1" class="menu">MENU 1</a> <!-- top menu --> 
     <div id="submenu1" class="submenu"> <!-- hidden by default --> 
      <a href="#">SUBMENU ITEM 1</a> <!-- submenu item --> 
      <a href="#">SUBMENU ITEM 2</a> 
     </div> 
    </li> 

    <li> 
     <a id="menu2" class="menu">MENU 2</a> 
     <div id="submenu2" class="submenu"> 
      <a href="#">SUBMENU ITEM 1</a> 
      <a href="#">SUBMENU ITEM 2</a> 
      <a href="#">SUBMENU ITEM 2</a> 
     </div> 
    </li> 
</ul> 

而這（使用jQuery）

$("#menu1").click(function() { 
    $("div.submenu").hide(); // hide all menus 
    $("#submenu1").toggle(); // open this menu 
}); 
$("#menu2").click(function() { 
    $("div.submenu").hide(); // hide all menus 
    $("#submenu2").toggle(); // open this menu 
}); 
$("#menu3").click(function() { 
    $("div.submenu").hide(); // hide all menus 
    $("#submenu3").toggle(); // open this menu 
}); 
$("#menu4").click(function() { 
    $("div.submenu").hide(); // hide all menus 
    $("#submenu4").toggle(); // open this menu 
}); 

$(document).bind('click', function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.parents().hasClass("nav")) 
    $("div.submenu").hide(); 
}); 

有很多在JS的第一部分重複的，是有辦法使這個JavaScript的更短，更好，更好？

Answer 1

你應該能夠腳本減少：

$(".nav .menu").click(function() { 
    $("div.submenu").hide(); // hide all menus 
    $(this).next().toggle(); // open this menu 
}); 
$(document).click(function(e) { 
    if (! $(e.target).parents().hasClass("nav")) 
    $("div.submenu").hide(); 
}); 

Answer 2

是：

var $submenus = $('.submenu'); 

$(".menu").click(function(e){ 
    var $menu = $(this).next('.submenu').toggle(); 
    $submenus.not('#' + $menu[0].id).hide(); 
    e.preventDefault(); 
}); 

$(document).click(function(e){ 
    if(!$(e.target).closest('.nav').length) $submenus.hide(); 
});