Question

我这里有一个小脚本来改变我的Div的高度，但实际上它只会变小。如何切换它以使其再次升高？

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

$(".div2").animate({
    height: ($(this).height() == 40) ? 10 : 40
}, 200);

});

Answer 1

问题是$(this)是指$( ".div1" )而不是$( ".div2" )

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

    $(".div2").animate({
        height: $(".div2").height() == 40 ? 10 : 40
    }, 200);

    });

完整的Codepen：https://codepen.io/anon/pen/zrRboZ

Answer 2

您可以使用if-then声明：

＆＃13;

$(document).ready(function() {
  var boolean = false;
  $(".div1").click(function() {
    boolean = !boolean;
    if (boolean) {
      $(".div2").animate({
        height: "+=20px"
      }, 200);
    } else {
      $(".div2").animate({
        height: "-=20px"
      }, 200);
    }
  });
  
});

＆＃13;

.div1 {
  background-color: red;
}
.div2 {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">Foo</div>
<div class="div2">Bar</div>

＆＃13;

此外，我会使用相对height，因此它会更改回相同的值。

Answer 3

这可能有点模糊，但您可以使用模运算。

请注意：

(40 + 30) % 60 == 10
(10 + 30) % 60 == 40
(40 + 30) % 60 == 10

等等

所以，换句话说，你可以做到

$( ".div1" ).click(function() {
    $(".div2").animate({
        height: ($(".div2").height()+30)%60
    }, 200); 
});

PS：小心使用它，如果你不清楚你可能指的是另一个对象，在这种情况下，$（＆＃34; .div1＆＃34;）

Answer 4

你可以使用toggleClass：

 .div2{height:40px;}
 .div2.smaller{height:10px;}


 $('.div1').click(function(){$('.div2').toggleClass('smaller');});

JS切换Div高度

4 个答案: