多個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; 
});