Javascript 滑动切换时添加和删除类

我创建了一个3 x 2的正方形按钮网格，颜色单调。我有一个滑动切换div，它在3行的两行之间弹出，当它这样做时，它会将页面其余部分的内容向下推，到目前为止，这一切都工作得很好

但是我已经创建了一个类（.active），它的css与：hover状态相同，因此当我将鼠标悬停在按钮上时，彩色版本将取代单调版本，但是我尝试添加一些js，使颜色（.active）在我单击某个按钮后保持打开状态，以便您可以看到哪个按钮（产品）slidedown div与之相关，其余部分仍处于单调状态

下面的.active代码可以在你点击一个按钮时完美地打开和关闭bottons颜色，但是我已经设置好了，如果一个按钮的div打开，你点击另一个按钮，打开的按钮关闭，然后新的按钮打开。然而，这个特性使我这里的.active状态的代码失去了平衡。当你说按钮1打开，然后点击按钮1关闭时，效果很好，颜色会先亮后暗，但如果你打开按钮1，然后点击按钮2，按钮1的div会关闭，然后打开按钮2的div，但当按钮2变为颜色时，botton 1会保持颜色。订单被取消了

我需要添加一些js来说明，一次只能有一个按钮是彩色的（.active），或者如果一个按钮是.active，则必须在打开新按钮之前将其关闭。。。请帮忙：）

$（文档）.ready（函数（）{
$（.a.active”）.removeClass（'active'）；//您可以使用jquery的
.each（）
方法和find.active类来删除它，
然后添加.active类

$(this).parent('a').each(function(){
$(this).removeClass('active');
});
$(this).parent('a').addClass('active');

这应该是可行的，但如果没有相关的HTML，我无法测试它：

$(document).ready(function () {
    $("#product1").click(function () {
        $("a.active").removeClass('active');
        $(this).parent('a').toggleClass('active'));        
        $("#product2box").slideUp('slow', function () {
            $("#product3box").slideUp('slow', function () {
                $("#product4box").slideUp('slow', function () {
                    $("#product5box").slideUp('slow', function () {
                        $("#product6box").slideUp('slow', function () {
                            $("#product1box").stop().slideToggle(1000);
                        });
                    });
                });
            });
        });
    });
});

此外，可能还有更好的方法来编写所有这些向上滑动的函数。顺便问一下，它们真的需要一个一个地继续吗？
您是否也可以发布您的HTML，或者更好地，制作一个？My slideToggle不再显示，并且。active从一开始对所有按钮都处于活动状态。是否发布HTML
$(document).ready(function() {
    $(".producthandler").click(function() {
        var ctx = $(this);
        var productboxId = ctx.children().eq(0).attr("id");

        ctx.toggleClass('active');
        $("#" + productboxId + "box").stop().slideToggle(1000);

        $(".producthandler").each(function() {
            var ctx = $(this);
            var producthandlerId = ctx.children().eq(0).attr('id');

            if (productboxId !== producthandlerId) {
                ctx.removeClass('active');
                $("#" + producthandlerId + "box").slideUp(1000); 
            }   
        });
    });
});

$(document).ready(function () {
    $("#product1").click(function () {
        $("a.active").removeClass('active');
        $(this).parent('a').toggleClass('active'));        
        $("#product2box").slideUp('slow', function () {
            $("#product3box").slideUp('slow', function () {
                $("#product4box").slideUp('slow', function () {
                    $("#product5box").slideUp('slow', function () {
                        $("#product6box").slideUp('slow', function () {
                            $("#product1box").stop().slideToggle(1000);
                        });
                    });
                });
            });
        });
    });
});

$(document).ready(function() {
    $(".producthandler").click(function() {
        var ctx = $(this);
        var productboxId = ctx.children().eq(0).attr("id");

        ctx.toggleClass('active');
        $("#" + productboxId + "box").stop().slideToggle(1000);

        $(".producthandler").each(function() {
            var ctx = $(this);
            var producthandlerId = ctx.children().eq(0).attr('id');

            if (productboxId !== producthandlerId) {
                ctx.removeClass('active');
                $("#" + producthandlerId + "box").slideUp(1000); 
            }   
        });
    });
});