JS Toggle Div Height

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语句：

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

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

 <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> 

另外，我将使用相对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：谨防使用此方法，如果不清楚，则可能是指其他对象，在这种情况下，为$（“。div1”）

Answer 4

您可以使用toggleClass：

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


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