javascript - 单击时调整 div 大小以适应窗口(工作)并在第二次单击时重新调整大小(不工作)

Question

我有一个代码，允许我调整容器的 W&H 大小以匹配单击时的窗口 W&H，并且效果很好，我也希望它在第二次单击时重新调整大小，但到目前为止这对我不起作用......

这是我工作了半天的结果 jsFiddle :

$('.more').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION
        d.width = $(window).width();;
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION            
        d.width = "50px";
        d.height =  "50px";            
        isFullscreen = false;
    }

    $(this).animate(d,speed)
    })

Answer 1

嗯...您的点击函数始终通过将 isFullscreen 初始化为 false 来启动(从不采用“else”分支)。您可以将 isFullscreen 设置为全局变量；将其声明和初始化移到函数之外。如果它应该是“静态”类型的变量，则需要以不同的方式初始化它(从为该单击函数命名开始)，也许:

 $('.more').click(function f(){
   f.isFullscreen = (f.isFullscreen===false)?true:false;

第一次调用该函数时，f.isFullscreen 未定义(与 false 不同)，因此设置为 false。在后续调用中，其值会翻转，因此您不需要在 MAXIMIZATION 和 MINIMIZATION 代码块中设置其值的单独行。