javascript - 一旦 div 滑动切换并且可见，就应用一个类

Question

如果我在 slidetoggle 上的 div 可见，我如何应用我在我的 css 中设置的类(这与悬停状态相同)？

我有 6 个按钮，布局为 3 x 2，我的 slidetoggle div 在 2 行 3 的中间向下滑动，并用它向下推内容，这一切都很完美，但我想要一个按钮已单击以激活其滑动切换以显示与我在 css 中为悬停状态定义的相同状态。

代码。

HTML

<div id="row1">

<a href="#!" class="active">
<span id="product1">
</span>
</a>

<a href="#!" class="active">
<span id="product2">
</span>
</a>
//etc etc etc to product 6
</div>

CSS

#row1 > a:hover > #product1 >#productblueheader > #productlogosblue1
/*#row1 >a.active > #product1 > #productblueheader> #productlogosblue1 */{
    background-image: url(../images/mwprologo.png);
}

#row1 > a:hover > #product1
/*#row1 > a.active > #product1*/ {
    border: 1px solid #e8bb27;
    background-color: #fff;
}

#row1 > a:hover > #product1 > #productstitle
/*#row1 > a.active > #product1 > #productstitle*/ {
    color: #e8bb27;
}

和JS

$(document).ready(function(){
$("a.active").removeClass('active');
            $("#product1").click(function(event){
                if($(this).parent('a').hasClass('active')){
                                $(this).parent('a').removeClass('active');
                         }else{
                                $(this).parent('a').addClass('active');
                            }
                $("#product2box").slideUp('slow', function() {
                $("#product3box").slideUp('slow', function() {
                $("#product4box").slideUp('slow', function() {
                $("#product5box").slideUp('slow', function() {
                $("#product6box").slideUp('slow', function() {
                    event.preventDefault();
                $("#product1box").stop().slideToggle(1000);
                return false;
            });
            });
            });
            });
            });
            });

更新了这个 js，颜色在开始时是关闭的(正确的)，当我点击按钮时颜色继续(正确的)现在我只需要在我点击它时在第二次点击时取消激活它？

Answer 1

$(document).ready(function(){
    $("a.active").removeClass('active');
                $("#product1").click(function(event){
                    if($(this).parent('a').hasClass('active')){
                                    $(this).parent('a').removeClass('active');
                             }else{
                                    $(this).parent('a').addClass('active');
                                }
                    $("#product2box").slideUp('slow', function() {
                    $("#product3box").slideUp('slow', function() {
                    $("#product4box").slideUp('slow', function() {
                    $("#product5box").slideUp('slow', function() {
                    $("#product6box").slideUp('slow', function() {
                        event.preventDefault();
                    $("#product1box").stop().slideToggle(1000);
                    return false;
                });
                });
                });
                });
                });
                });

这几乎是完美的.. 现在唯一的问题是，因为我已经设置了它，所以当一个产品被点击时，切换的 div 会向上滑动并打开新点击的 div，现在事件类不会因取消点击而关闭另一种产品...他们关闭自己的事件状态但是当我单击其他产品时它的事件颜色状态在第一个按钮上保持打开状态并在第二个按钮上打开然后订单被取消...