0

次のコードはうまく機能しますが、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;
        });
    });
4

1 に答える 1

3

このようなことをする

$(".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;
});
于 2013-02-06T14:42:47.920 に答える