Html 单击<；部门>；若要展开，请再次单击以收缩-其正在展开，而不是收缩

我有一个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>

$（文档）.ready（函数（）{
$（“#statExp”）。单击（函数（）{
$（“#statExp”）.animate（{height:'100px'）；
});
}); 

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

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

isLarge=假；
$（文档）.ready（函数（）{
$（“#statExp”）。单击（函数（）{
$（“#statExp”）.animate（{height:'isLarge'20px'：'100px'））；
isLarge=！isLarge；
});
}); 

如前所述，您需要一个布尔值来记住它是应该收缩还是应该扩展。此代码将记住初始大小。它还允许您做的不仅仅是设置一个类。它的可扩展性稍好一些

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});
}

---

啊，效果很好。我永远都不知道该怎么做。谢谢你，伙计！