Existe-t-il un moyen de simplifier cette jquery?

Question

J'ai écrit un menu déroulant avec la structure suivante. Il est censé se dérouler en cliquant sur, et fermer sur le clic.

Voici le 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> 

Et c'est le JavaScript (en utilisant 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(); 
}); 

Il y a beaucoup de répétitions dans la première partie de la JS, est-il un moyen de faire ce plus court, plus agréable, mieux?

Answer 1

Vous devriez être en mesure de réduire le script:

$(".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

Oui:

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