Question

我在这里遇到了一个小问题。我到目前为止尝试过两种方式，包括添加和删除一个类，但我目前尝试通过div大小来做它。

<script>
  $( document ).ready(function() {

     $(".backlarger").click(function(){

            if ($(this).width() < 1000) {
                $(this).animate({ height: "900px" });
                $(this).animate({ width: "100%" }); 
              return false;
         } else if ($(this).width() > 800) {
                $(this).animate({ width: "33.3% !important" });
                $(this).animate({ height: "260px !important" });
                return false;
         } 
        }); 
     });

上面似乎没有关闭div。我也会有一些这些div;会不会是一次开放的最佳方式？

JSfiddle https://jsfiddle.net/jzn7nub2/

Answer 1

在我的尝试中，第一次点击时我们的代码将宽度增加到937px。
然后在第二次点击时它仍会进入if分支， else if将永远不会被调用。
在console.log($(this).width());之前添加if-else if以查看这些数字。
要解决此问题，请检查确切数字的高度，或者只使用if-else
试试这个

$(".backlarger").click(function(){
    if ($(this).height() < 300) {
      $(this).animate({ height: "900px" });
      $(this).animate({ width: "100%" }); 
       return false;
 } else if ($(this).height() >= 300) {
      $(this).animate({ width: "33.3%" });
        $(this).animate({ height: "260px" });
   } 
});

或 JSFiddle

Jquery在100％到33.3％之后减小尺寸

1 个答案: