Question

小提琴here

在广场中点击时，我需要使用相同的过渡使其他人消失（因此没有滚动条）。怎么做？

.block {
    width:100px;
    height:100px;
    -webkit-transition-duration: 2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out; /*animation*/
    text-align: center;
    overflow: hidden;   
}

Answer 1

最好的方法是在兄弟元素中添加close类。

jsFiddle exmaple

.close {
    height: 0%;
    width: 0%;
    margin:0;
}

我使用toggleClass简化了你的jQuery：

$(".block").click(function () {
    $(this).toggleClass('open').siblings().toggleClass('close');
});

Answer 2

以最快的方式，您可以添加到正文或父级，其中当您再次单击方形时单击并删除此类时，正方形是名为“已打开”的类。这里fiddle

$(".block").click(function(i, o){
    if ($(this).hasClass("open")) {
        $(this).removeClass("open");
        $('body').removeClass("opened");
    } else { 
        $(this).addClass("open");   
        $('body').addClass("opened");
    }
});

过渡到其他元素CSS

2 个答案: