html - 点击展开，然后再次单击以缩小 - 它正在扩大，只是没有缩小

Question

一旦用户单击 div 本身，我有一个 div 会展开以显示内容。div 使用 javascript 进行动画处理，比单击一下立即从小到大更流畅。

我让它扩大，只是不再缩小——不管我改变了多少编码。

线索？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script> 
$(document).ready(function(){
  $("#statExp").click(function(){
    $("#statExp").animate({height:'100px'});    
  });
}); 
</script> 

<div id="statExp" style="background:#98bf21;height:20px;width:450px;position:relative;overflow:hidden;"></div>

Answer 1

您需要保留一个布尔值并使用它来决定是扩大还是缩小：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
isLarge = false; 
$(document).ready(function(){
  $("#statExp").click(function(){
    $("#statExp").animate({height:(isLarge ? '20px' : '100px')});
    isLarge = !isLarge;    
  });
}); 
</script> 

<div id="statExp" style="background:#98bf21;height:20px;width:450px;position:relative;overflow:hidden;"></div>

Answer 2

正如已经说过的那样，您将需要一个布尔值来记住它是应该缩小还是扩大。此代码将记住初始大小。它还允许您做更多的事情，而不仅仅是设置一个类。它的可扩展性略高。

var statHeight;

$(document).ready(function(){
    statHeight = $("#statExp").css('height');
    var toggle = false;
    $("#statExp").click(function(){
        if (!toggle) {
            expand($(this));
            toggle = true;
        } else {
            shrink($(this));
            toggle = false
        }
    });
});

function expand(elem) {
    elem.animate({height:'100px'});
}

function shrink(elem) {
    elem.animate({height:statHeight});
}