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

多个onclick面板代码效率

1 个答案: