Question

我创建了一个3 x 2网格的方形按钮，颜色单调。我有一个slidetoggle div，它在两行3之间弹出，因为它将内容从其余的hte页面推下来，到目前为止这一切都完美无缺。

但是我已经创建了一个类（.active），因为css与：hover状态相同，所以当我将鼠标悬停在按钮上时，彩色版本会替换单调版本，但是我试图添加一些js来制作当我点击某个按钮时，颜色（.active）保持不变，这样你就可以看到slidedown div与哪个按钮（产品）相关，其余按钮仍然是单调的......

下面的.active代码非常适合在点击那个按钮时打开和关闭Bottons颜色，但我已将其设置为如果一个按钮的div打开并且您单击另一个按钮，则打开一个关闭，然后新的打开。但是，此功能会抛弃我在此处为.active状态所拥有的代码的平衡。当您说按钮1打开并且您单击按钮1关闭时，此工作正常，颜色继续然后关闭，但如果您打开按钮1并单击按钮2，按钮1的div关闭并打开按钮2的div但是然后，当按钮2变为颜色时，按钮1保持颜色。订单被抛弃......

我需要添加一些js来说，一次只有一个按钮可以是彩色的（.active），或者如果一个按钮是.active，它必须在新的按钮打开之前关闭...请帮助：）

$(document).ready(function(){

    $("a.active").removeClass('active');                      //<<this .active code &

        $("#product1").click(function(){

            if($(this).parent('a').hasClass('active')){           //<<<this .active code
                $(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() {
                            $("#product1box").stop().slideToggle(1000);
                                                                         //do i need
                                                                   //something here??
                        });
                    });
                });
            });
        });
    });

这是HTML

<div id="row1">
        <a href="#!" class="active"><span id="product1">
            <div id="productblueheader">
                <div id="productlogosblue1"></div>
            </div>
            <div id="productstitle">Stops all spam and unwanted email.</div>
            <div id="producttext">With over 8 million users ******* is the leading in anit-spam software on the market today! Sort all your spam issues in one place now!</div>
        </span></a>
        <a href="#!" class="active"><span id="product2">
            <div id="productblueheader">
                <div id="productlogosblue2"></div>
            </div>
            <div id="productstitle">The easiest email encryption ever.</div>
            <div id="producttext">In todays world, we won’t enter personal details in to untrusted websites, but we send personal information via regular (insecure) email all the time.</div>
        </span></a>
        <a href="#!" class="active"><span id="product3">
            <div id="productblueheader">
                <div id="productlogosblue3"></div>
            </div>
            <div id="productstitle">The easiest email encryption ever.</div>
            <div id="producttext">****** is a revelation in security and ease of use. Get the best protection against viruses, spyware, scam websites and other threats.</div>
        </span></a>

    </div>

（然后对于row2产品4-6相同）

Answer 1

你使用jquery的.each()方法并找到.active类来删除它，然后添加.active类。

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

Answer 2

这应该有效，但我没有相关的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);
                        });
                    });
                });
            });
        });
    });
});

此外，可能有更好的方法来编写所有这些滑动功能。他们真的需要顺便去一个人吗？

Answer 3

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

在slidetoggle上添加和删除类

3 个答案: