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

    }

为手风琴效果添加关闭按钮

2 个答案: