如何将此jQuery函数转换为"if"语句

Question

现在我正在尝试编写一个jquery函数,它允许我在单击它时展开div,然后在再次单击它时将其返回到其初始大小.

我尝试添加一个按钮使其缩回,但因为当我点击它时脚本认为我也点击了父div并再次展开.理想情况下,我想在没有按钮的情况下这样做.

我得到的代码在这里 -

(jsfiddle):https://jsfiddle.net/Nikf/wykL6u7u/9/

<div class="grid">
        <div class="block" id="block1">
            <button class="retractor" id="ret1">back</button>
        </div>
        <div class="block" id="block2">2</div>
        <div class="block" id="block3">3</div>
        <div class="block" id="block4">4</div>
        <div class="block" id="block5">5</div>
        <div class="block" id="block6">6</div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
}

.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}

.block{
    width: 33.3%;
    height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}

.retractor{
    width: 50px;
    height: 50px;
    padding: 10px 0;
    text-align: center;
    background-color: #FF0000;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;

    position: absolute;
    bottom: 30px;
    right: 30px;
}

#block1{
    background-color: #222222;
}           

#block2{
    background-color: #999999;
}           

#block3{
    background-color: #5555555;
}           

#block4{
    background-color: #999999;
}   

#block5{
    background-color: #333333;
}       

#block6{
    background-color: #CCCCCC;

脚本

$('#block1').click(function(){
    $('#block1').animate({
        width: '100%',
        height: '100%'
    });
});

$('#block1').click(function(){
    $('#block1').animate({
        width: '33.3%',
        height: '50%'
    });
});

Answer 1

您可以将jQuery toggleClass与CSS转换结合使用以获得相同的结果.检查https://jsfiddle.net/wykL6u7u/11/,看看是否符合您的需求.

我做了什么:

.block {
  width: 33.3%;
  height: 50%;
// ...
  transition: all 1s;
}

.block.expanded {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

而JS只是类切换:

$('#block1').click(function(){
        $(this).toggleClass("expanded");
});