Jquery가 두 번째 클릭 후 형제를 인식하지 못함

Question

내 스크립트에서 어떤 일이 일어나는지 알지 못합니다.

기능 : 18 % 너비의 블록이 4 개 있고 왼쪽으로 떠 있습니다. 한 블록을 클릭하면 SIBLINGS가 사라지고이 블록이 100 % 너비로 움직입니다.

아무 곳이나 클릭하면 (문서)이 블록이 18 % 너비로 돌아오고 SIBLINGS가 다시 페이드 인됩니다.

처음에는 제대로 작동하지만 다른 상자를 닫으려고하면이 첫 번째 상자가 다른 형제와 함께 사라지지 않습니다.

내 코드를 수행 한 후에 : JSFiddle에

: http://jsfiddle.net/4FKae/1/

HTML을

<div class="tipos-box"> 
<div class="box box-fechada red" rel=".red-data"> 
    <div class="box-content"> 
     Uhul abc 
    </div> 

</div> 
<div class="box box-fechada paleale" rel=".paleale-data"> 
    <div class="box-content"> 
     Uhul abc 
    </div> 
</div> 
<div class="box box-fechada pielsen" rel=".pielsen-data"> 
    <div class="box-content"> 
     Uhul abc 
    </div> 
</div> 
<div class="box box-fechada weiss" rel=".weiss-data"> 
    <div class="box-content"> 
     Uhul abc 
    </div>   
</div> 
</div> 

CSS

.box { 
width: 18%; 
float: left; 
margin: 3%; 
height: 500px; 
border: solid 1px #F00; 
cursor: pointer; 
} 
.red:hover, .red.essa-box { 
border: solid 1px #FF0; 
} 
.paleale:hover, .paleale.essa-box { 
border: solid 1px #F0F; 
} 
.pielsen:hover, .weiss.essa-box { 
border: solid 1px #FFF; 
} 
.weiss:hover, .weiss.essa-box { 
border: solid 1px #0FF; 
} 

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


} 


}); 

Answer 1

클릭 이벤트에 바인딩되는 요소와 관련이 있습니다. 다시 페이드 아웃 한 후에 다시 리바 인딩해야합니다.

또한 어떤 jQuery 버전을 사용하고 있습니까? 그것은 1.7 이후에 있다면, 당신은

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