Javascript 第二次单击后，Jquery无法识别同级

我不知道我的剧本怎么了

功能是：我有4个块，宽度为18%，左侧浮动。如果单击一个块，同级块将淡出，然后该块将设置为100%宽度的动画

如果单击“文档位置”，此块将返回到18%宽度，同级将再次淡入

第一次它工作正常，但在我关闭并尝试打开另一个盒子后，第一个盒子不会和其他兄弟姐妹一起消失

请按照我的代码进行操作：

在JSFIDLE上：

HTML

JQUERY

$(document).ready(function(){


$('.box-fechada').bind("click", abrebox);

function abrebox(e) {
    $('.box-fechada').unbind("click");

    e.stopPropagation();
    $(this).dequeue();



    $(this)
    .addClass("essa-box")
    .removeClass("box-fechada")
    .queue(function(){
        $(this).siblings().fadeOut();
        $(this).dequeue();
    })
    .delay(500)
    .queue(function(){
        $(this).animate({
            width: "100%"
        });
        $(this).dequeue();
    });




    $(document).bind("click", function(){
        $(".essa-box")
        .animate({
            width: "18%"
        })
        .queue(function(){
            $(this).siblings().fadeIn();
        })
        .addClass("box-fechada")
        .removeClass("essa-box");

        $(document).unbind("click");
        $('.box-fechada').bind("click", abrebox);
    });


}


});

---

它与绑定到单击事件的元素有关。你需要在淡入后重新绑定它们

 .queue(function(){
        $(this).siblings().fadeIn();
    })
    .addClass("box-fechada")
    .removeClass("essa-box");
    $(this).bind("click", abrebox);

另外，您使用的是什么版本的jQuery？如果大于1.7，则应使用.on

 $( '.box-fechada' ).on( "click", abrebox);

---

我并不真正遵循逻辑，但我敢打赌它与绑定和解除绑定.box fechada上的单击处理程序有关。你为什么这么做？如果是因为动态地添加和删除类，为什么不将委派与.on一起使用呢？感谢.on提示，但它仍然不起作用。事件再次绑定到以下行：$'.box fechada'.bindclick，abreCerveja；问题是，您打开的块，如果单击任何其他块，该块不会淡出。

 .queue(function(){
        $(this).siblings().fadeIn();
    })
    .addClass("box-fechada")
    .removeClass("essa-box");
    $(this).bind("click", abrebox);

 $( '.box-fechada' ).on( "click", abrebox);