javascript - JQuery - IF 语句只能工作两到三次

Question

我正在尝试使此页面正常工作，其中有一条垂直的图片线(缩略图大小)，然后您可以单击这些图片使它们滚动到全宽并显示大量文本和快乐的内容。我已经设法做到了这一切。但是，如果我单击一个缩略图，则所有打开的缩略图都应该关闭。我已经实现了 IF 语句和类检查:

$("a#shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});

一切正常，但是当您在不同的缩略图上单击两到三次以打开它们并关闭其他缩略图后，已经打开的缩略图会卡住，并且单击的缩略图会按应打开的方式打开。您必须单击已单击的缩略图才能关闭另一个缩略图，然后您必须等待一段时间才能单击已单击的缩略图才能再次正确关闭它。之后就一直这样。

我已经尝试过使用名为 Summer of GOTO 的插件来完成此操作，因为我认为它与检查是否有任何“完成”类有关，所以我想让它使用以下命令重新检查内容在 JQuery 中转到。使用 WHILE 语句也不起作用，但这可能是因为我不理解该函数。

有人知道如何解决这个问题吗？

提前致谢。

编辑::JSfiddle of what I'm working on

Answer 1

看起来即使你在每个缩略图上触发的点击都有相同的ID，元素的ID应该是唯一的，你可以像这样使用类来代替

$("a.shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});