多个onclick面板代码效率

Question

但是，下面的代码很适合作为jQuery初学者，甚至我可以看到这个代码可以更简单（可能只有几行代码）。我应该使用数组和foreaches吗？或者是否有一个特定的jQuery功能？感谢您的知识。

/* 1 panel */ 
    $(".button_panel_1").click(function(){ 
     $(".panel_2, .panel_3, .panel_4, .panel_5, .panel_6, .panel_7").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_1").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 2 panel */ 
    $(".button_panel_2").click(function(){ 
     $(".panel_3, .panel_4, .panel_5, .panel_6, .panel_7, .panel_1").hide(222);  
     $(".button_main").removeClass("active"); 
     $(".panel_2").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 3 panel */ 
    $(".button_panel_3").click(function(){ 
     $(".panel_2, .panel_4, .panel_5, .panel_6, .panel_7, .panel_1").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_3").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 4 panel */ 
    $(".button_panel_4").click(function(){ 
     $(".panel_2, .panel_3, .panel_5, .panel_6, .panel_7, .panel_1").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_4").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 5 panel */ 
    $(".button_panel_5").click(function(){ 
     $(".panel_2, .panel_3, .panel_4, .panel_6, .panel_7, .panel_1").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_5").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 6 panel */ 
    $(".button_panel_6").click(function(){ 
     $(".panel_2, .panel_3, .panel_4, .panel_5, .panel_7, .panel_1").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_6").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* 7 panel */ 
    $(".button_panel_7").click(function(){ 
     $(".panel_2, .panel_3, .panel_4, .panel_5, .panel_6, .panel_1").hide(222);   
     $(".button_main").removeClass("active"); 
     $(".panel_7").slideToggle(222); 
     $(this).toggleClass("active"); return false; 
    }); 
    /* Close button */ 
    $(".panel_header_close").click(function(){ 
     $(".panel_main").hide(222);   
     $(".button_main").removeClass("active"); return false; 
    }); 

我已设法把这个缩小代码，相当不错的我会说：

$.each(['1', '2', '3', '4', '5', '6', '7'], function(index, value) { 
     $(".button_panel_" + value).click(function(){    
      $(".panel_" + value).slideToggle(222); 
      $(".panel_main").not(".panel_" + value).hide(222); 
      $(".button_main").not(this).removeClass("active");   
     $(this).toggleClass("active"); return false; 
     }); 
    }); 

Answer 1

做这样的事情

$(".button").click(function(){ 
     $(".button").not(this).hide().removeClass("active");   
     $(this).addClass("active"); 
     $(this).find(".panel").slideToggle(); 
     return false; 
}); 

或..

$(".button").click(function(){ 
     $(this).addClass("active").siblings().hide().removeClass("active");  
     $(this).find(".panel").slideToggle(); 
     return false; 
});