在手风琴效果中添加一个关闭按钮

Question

我有一个jQuery的问题，我不能把我的头。基本上，我有一个横向的时间表，显示公司的许多事件。这些活动的设置具有手风琴效果，效果很好。我正试图添加一个关闭按钮到每个手风琴面板，并在目前被困在一个循环。

如果单击面板，代码将检查是否附加了一个名为"active“的类。如果没有，则添加它并展开面板。我已经添加了我的密切链接，并说要删除“活动”类，它可以工作，但一旦它意识到它不再有类，它重新添加它。因此，我被困在这个循环中，无法摆脱:)

任何帮助都会很好！

在这里可以看到对这个问题的操纵：http://jsfiddle.net/damienoneill2001/DdALd/8/

当您通过不同的面板单击，您可以看到他们的工作。在第二个面板上设置一个关闭按钮，并在单击任何面板后变得可见。如果单击“关闭”按钮，然后再次单击同一面板，则可以看到它在循环中被捕获。

另外，如果您打开一个面板，再次单击同一个面板关闭，然后尝试再次打开它，它会被捕获在同一个循环中。

jQuery代码：

$(document).ready(function()
 {
    activePanel = $("#accordion .panel:first");
    $(activePanel).addClass('active');
    $(".panel").click(function(){

if($(this).not('.active') )
{
    $(this).animate({width: "400px"}, 300);
    $(this).addClass('active');
    $(activePanel).animate({width: "60px"}, 300);
    activePanel = this;
    $('.close').css({display: "block"});

    }

}); 
$(".close").click(function(){
     $('.close').css({display: "none"});
     $('.panel').removeClass('active');
    });

});

Answer 1

使用hasClass

if(!$(this).hasClass('.active') )
{
    $(this).animate({width: "400px"}, 300);
    $(this).addClass('active');
    $(activePanel).animate({width: "60px"}, 300);
    activePanel = this;
    $('.close').css({display: "block"});

}

编辑

我更新了你在小提琴里提供的代码

$(document).ready(function () {
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
    $(".panel").click(function () {
        if ($(this).not('.active')) {
            $(".active").animate({
                width: "60px"
            }, 300);
            if ($(this).css("width") == "400px") {
                $(this).animate({
                    width: "60px"
                }, 300);
                $('.close').hide();
            } else {
                $(this).animate({
                    width: "400px"
                }, 300);
                $('.close').show();
            }
            $(this).addClass("active");
        }

    });
    $(".close").click(function (e) {
        e.stopPropagation();
        $(this).hide();
        $(".active").animate({
            width: "60px"
        }, 300);

    });

});

Demo

Answer 2

将not更改为is

if(!$(this).is('.active') )
{
    $(this).animate({width: "400px"}, 300);
    $(this).addClass('active');
    $(activePanel).animate({width: "60px"}, 300);
    activePanel = this;
    $('.close').css({display: "block"});

    }