Question

我不知道我的剧本发生了什么。

功能是：我有4个块，宽度为18％，向左浮动。如果单击一个块，则SIBLINGS将淡出，并且此块将设置为100％宽度的动画。

如果单击任何位置（文档），此块将返回18％宽度，并且SIBLINGS将再次淡入。

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

遵循我的代码：

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

它与绑定到click事件的元素有关。在你淡出它们之后，你需要重新绑定它们。

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

另外，你使用的是什么版本的jQuery？如果它晚于1.7，你应该使用.on（）

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

Jquery在第二次点击后不识别兄弟姐妹

1 个答案: