有没有办法简化这个jquery？

我写了一个下面的结构下拉菜单。 它应该在点击时下拉，并在点击时关闭。

这是HTML

 
 MENU 1  
  SUBMENU ITEM 1  SUBMENU ITEM 2 
 
 
 MENU 2 
 SUBMENU ITEM 1 SUBMENU ITEM 2 SUBMENU ITEM 2 
 
  

这就是JavaScript（使用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的第一部分有很多重复，有没有办法让它更短，更好，更好？

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