如何将这个jQuery函数转换为'如果'陈述

您可以将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");
});

所以经过深思熟虑，我这样做了。它进行2次计算，以找出网格的宽度和高度的百分比，并在此基础上制作动画。我已经设置了基于网格点击的扩展和收缩，但如果你想使用按钮，只需将点击绑定改回后面的按钮id即可。

$('.grid').click( function() {
  var heightPercentage = ( 100 * parseFloat($('.grid').css('height')) / parseFloat($('.grid').parent().css('height')) ) + '%';  
  var widthPercentage = ( 100 * parseFloat($('.grid').css('width')) / parseFloat($('.grid').parent().css('width')) ) + '%'; 
  var toggleWidth = widthPercentage === "100%" ? "33%" : "100%";
  var toggleHeight = heightPercentage === "100%" ? "50%" : "100%";
  $('.grid').animate({ 
    width: toggleWidth,
    height: toggleHeight
  });       
});

https://jsfiddle.net/bgarrison25/o7k2y25q/1

我建议使用"toggleClass"并依赖CSS类，而不是硬编码的CSS值。同意@sebastian wramba

问题是我们根本不需要后退按钮。我把它拿出来的时候明白了，op更希望它不在那里，但点击div可以切换。如果我没有正确阅读要求，欢迎反馈。

https://jsfiddle.net/e15kxkdr/3/

<div class="grid">
      <div class="block" id="block1">1</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>
.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}
.block{
    width: 33.3%;
  height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}
.nodisplay {
  display: none;
}
$('.grid').on("click", "div", function(){
        $(this).toggleClass("grid")
        $(this).toggleClass("block")
        $(this).siblings().toggleClass("nodisplay")
    })

更新：我更改了这一点，通过jquery"on"子元素处理主元素"grid"的子元素，而不是使用单独的类。然后我添加了一个新类"nodisplay"来隐藏其他元素。

试试这个：

$(document).ready(function(){
     var expand = true;
     $('#block1').click(function(){
         var width='33.3%', height="50%";
         if(expand){
            width='100%';
            height='100%';
            expand=false;
         }else{
            expand=true;
         }
        $('#block1').animate({
           width: width,
           height: height
        });
     });
});

尝试使用Array.prototype.reverse() 将值存储在数组中

我认为@BillGarrison是正确的。没有解释就不是代码的工作原理显而易见。

说明：

方法是一个"切换"过程。对进程使用arr[0]处的值；反向CCD_ 4；使用arr[0]处的值用于下一进程；反向CCD_ 6。

该方法可以在不使用Array.prototype.reverse()的情况下实现；使用0和1、undefined；请参阅在最新的jQuery版本中是否已弃用.thoggle（）？。

该方法还可以扩展为循环通过或连续切换n值，在迭代完所有数组项后返回初始值。

    var arr = [
      ["100%", "100%"],
      ["33.3%", "50%"]
    ];
    $("#block1").click(function() {
          $(this).animate({
            // at initial click, set `width` to `arr[0][0]` : `100%`,
            // set `height` to `arr[0][1]` : `100%`
            // reverse `arr`
            // at second click `arr[0]` : `["33.3%", "50%"]`;
            // set `width` to `arr[0][0]` : `33.3%`
            // set `height` to `arr[0][1]` : `50%`;
            // repeat procedure
            width: arr[0][0],
            height: arr[0][1]
          }, function() {
            arr.reverse()
          });
    })

jsfiddlehttps://jsfiddle.net/wykL6u7u/14/

我建议您更改逻辑。如果添加一个特定的类并让CSS来做动画，会更容易。

$('.block').click(function(ev){
    $(ev.target).toggleClass('active');
});

通过这种方式，您可以从.block元素中删除按钮。

将动画和新类添加到CSS:

.block{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.block.active{
    width: 100%;
    height:100%;
}

我还没有测试过这个代码。我希望它能起作用

--编辑--

ev.target不是jQuery元素。我把它包装在$（ev.target）中，否则它就没有.toggleClass（）；